UI Components

Apps Banner

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

Apps banner

Example

Find your flavour even faster

Download the Just Eat app for faster ordering and more personalised recommendations.

Download the Just Eat app on iOS Download the Just Eat app on Android 
<div class="l-container">
<div class="c-appsBanner">
    <div class="c-appsBanner-image">
        <picture>
            <source media="(min-width: 860px)" srcset="/assets/img/examples/appsBanner--wide.jpg" >
            <source media="(min-width: 600px)" srcset="/assets/img/examples/appsBanner--mid.jpg" >
            <img srcset="/assets/img/examples/appsBanner--narrow.jpg" alt="" >
        </picture>
    </div>

    <div class="c-appsBanner-content">
        <h3 class="c-appsBanner-heading">Find your flavour even faster</h3>
        <p>Download the Just Eat app for faster ordering and more personalised recommendations.</p>
        <div class="c-appsBanner-buttons">
            <a class="c-appsBanner-appBtn" href="https://app.adjust.com/oc511o_1455tm?utm_medium&#x3D;internal&amp;amp;campaign&#x3D;homepage" target="_blank" data-gtm="homepage|app_promotion|visit_app_store">
                <img class="c-icon--ios" src="/assets/img/icons/appstore/ios.svg" alt="Download the Just Eat app on iOS" />
            </a>
            <a class="c-appsBanner-appBtn" href="https://app.adjust.com/oc511o_1455tm?utm_medium&#x3D;internal&amp;amp;campaign&#x3D;homepage" target="_blank" data-gtm="homepage|app_promotion|visit_play_store">
                <img class="c-icon--android" src="/assets/img/icons/appstore/android.svg" alt="Download the Just Eat app on Android" />
            </a>
        </div>
    </div>
</div>
</div>