UI Components

Cuisines Widget

The c-cuisinesWidget component is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding @include cuisinesWidget(); into your SCSS dependencies file.

Cuisines Widget

Styles look a little bit broken here because of fixed width container. In future full width block will be avaliable in UI templates page.

Example

Chinese

Chiken

Pizza

Indian

Kebabs

Fish & chips

 
<div class="l-container">
<div class="c-cuisinesGrid c-cuisinesGrid--gridOfThree">
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Chinese</h3>
</a>
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Chiken</h3>
</a>
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Pizza</h3>
</a>
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Indian</h3>
</a>
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Kebabs</h3>
</a>
<a class="c-cuisinesWidget " href="#">
    <img src="/assets/img/examples/cuisines-widget.jpg" alt="" class="c-cuisinesWidget-img">
    <h3 class="c-cuisinesWidget-name">Fish &amp; chips</h3>
</a>
</div>
</div>