UI Components

Page Banner

Page Banners stretch to the full width of their container, and contain banner images which typically use a picture element. They optionally can display a white or a coloured version of the Just Eat rays at the bottom.

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

Menu Page Banner With White Rays

Example

<div class="c-pageBanner c-pageBanner--narrow c-pageBanner--withRays--white c-pageBanner--negativeBottom--aboveMid">
    <picture>
        <source class="c-pageBanner-img" media="(min-width: 860px)" srcset="/assets/img/examples/kebabs--wide.jpg" data-ft="restaurant-level-image--wide">
        <source class="c-pageBanner-img" media="(min-width: 600px)" srcset="/assets/img/examples/kebabs--mid.jpg" data-ft="restaurant-level-image--mid">
        <img class="c-pageBanner-img" srcset="/assets/img/examples/kebabs--narrow.jpg" alt="" data-ft="restaurant-level-image--narrow" >
    </picture>
</div>

Homepage Banner With Coloured Rays

Example


<div class="c-pageBanner c-pageBanner--tall c-pageBanner--withRays--coloured">
    <picture>
        <source class="c-pageBanner-img" media="(min-width: 860px)" srcset="/assets/img/examples/homepageBanner--wide.jpg" data-ft="restaurant-level-image--wide">
        <source class="c-pageBanner-img" media="(min-width: 600px)" srcset="/assets/img/examples/homepageBanner--mid.jpg" data-ft="restaurant-level-image--mid">
        <img class="c-pageBanner-img" srcset="/assets/img/examples/homepageBanner--narrow.jpg" alt="" data-ft="restaurant-level-image--narrow" >
    </picture>
</div>