UI Components

Footers

Default Footer

Default bog-standard Footer Component

<footer class="c-footer">
    <div class="l-container c-footer-row">
        <div class="g g--stack--wide">
            <div class="g-col c-footer-panel" data-panel-collapsible data-toggle-name="footer-panel-1">
                <h2 class="c-footer-heading" data-footer-panel-heading data-toggle-target="footer-panel-1" data-toggle-class="is-collapsed">
                    Customer service
                    <img class="c-footer-chevron c-icon--chevron u-showBelowWide" src="/assets/img/icons/arrows/chevron.svg" alt="" />
                </h2>
            
                <ul class="c-footer-list">
                        <li>
                            <a href="/contact" >
                                Contact us
                            </a>
                        </li>
                        <li>
                            <a href="/account/login" rel="nofollow">
                                Log in
                            </a>
                        </li>
                        <li>
                            <a href="/account/register" >
                                Sign up
                            </a>
                        </li>
                        <li>
                            <a href="/blog" >
                                Blog
                            </a>
                        </li>
                        <li>
                            <a href="/apps" >
                                Mobile apps
                            </a>
                        </li>
                        <li>
                            <a href="/member/updateuserinfo" >
                                My account
                            </a>
                        </li>
                        <li>
                            <a href="/giftcards/redeem" >
                                Redeem a gift card
                            </a>
                        </li>
                        <li>
                            <a href="http://giftcards.just-eat.co.uk" >
                                Buy a gift card
                            </a>
                        </li>
                </ul>
            </div>
            
            <div class="g-col c-footer-panel" data-panel-collapsible data-toggle-name="footer-panel-2">
                <h2 data-test-id="cuisine-footer-heading" class="c-footer-heading" data-footer-panel-heading data-toggle-target="footer-panel-2" data-toggle-class="is-collapsed">
                    Top cuisines
                    <img class="c-footer-chevron c-icon--chevron u-showBelowWide" src="/assets/img/icons/arrows/chevron.svg" alt="" />
                </h2>
            
                <ul class="c-footer-list">
                        <li><a href="/takeaway/nearme/chinese">Chinese</a></li>
                        <li><a href="/takeaway/nearme/indian">Indian</a></li>
                        <li><a href="/takeaway/nearme/italian">Italian</a></li>
                        <li><a href="/takeaway/nearme/sushi">Sushi</a></li>
                        <li><a href="/takeaway/nearme/pizza">Pizza</a></li>
                        <li><a href="/takeaway/nearme">View all cuisines</a></li>
                </ul>
            </div>
            
            
            <div class="g-col c-footer-panel" data-panel-collapsible data-toggle-name="footer-panel-4">
                <h2 class="c-footer-heading" data-footer-panel-heading data-toggle-target="footer-panel-4" data-toggle-class="is-collapsed">
                    Locations
                    <img class="c-footer-chevron c-icon--chevron u-showBelowWide" src="/assets/img/icons/arrows/chevron.svg" alt="" />
                </h2>
            
                <ul class="c-footer-list">
                        <li><a href="/takeaway/birmingham">Birmingham</a></li>
                        <li><a href="/takeaway/cardiff">Cardiff</a></li>
                        <li><a href="/takeaway/glasgow">Glasgow</a></li>
                        <li><a href="/takeaway/leeds">Leeds</a></li>
                        <li><a href="/takeaway/manchester">Manchester</a></li>
                        <li><a href="/takeaway">View all locations</a></li>
                </ul>
            </div>
            
            <div class="g-col c-footer-panel" data-panel-collapsible data-toggle-name="footer-panel-5">
                <h2 class="c-footer-heading" data-footer-panel-heading data-toggle-target="footer-panel-5" data-toggle-class="is-collapsed">
                    A bit more about us
                    <img class="c-footer-chevron c-icon--chevron u-showBelowWide" src="/assets/img/icons/arrows/chevron.svg" alt="" />
                </h2>
            
                <ul class="c-footer-list">
                        <li><a href="https://restaurants.just-eat.co.uk/" >Restaurant sign up</a></li>
                        <li><a href="https://couriers.just-eat.co.uk/application" >Deliver with Just Eat</a></li>
                        <li><a href="/pricepromise" >Price promise</a></li>
                        <li><a href="/privacy-policy" >Privacy policy</a></li>
                        <li><a href="/termsandconditions" >Terms and Conditions</a></li>
                        <li><a href="/cookiespolicy" >Cookie Policy</a></li>
                        <li><a href="https://www.justeatplc.com/about-us/our-business" >About us</a></li>
                        <li><a href="https://www.just-eat.com/" >Company website</a></li>
                        <li><a href="https://careers.just-eat.com/" >Careers</a></li>
                        <li><a href="https://www.justeatplc.com/download_file/view/435/1" target="_blank">Modern Slavery Statement</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="c-footer-row--light">
        <div class="g g--stack--wide l-container c-footer-row">
            <div class="g-col g-span6">
                <h2 class="c-footer-heading">Download our apps</h2>
            
                <ul class="c-footer-list c-footer-list--inline">
                        <li class="c-footer-list-item">
                            <a href="https://app.adjust.com/oc511o_1455tm?utm_medium&#x3D;internal&amp;campaign&#x3D;homepage" target="_blank">
                                <img class="c-footer-icon c-icon--ios" src="/assets/img/icons/appstore/ios.svg" alt="Download on the App Store" />
                            </a>
                        </li>
                        <li class="c-footer-list-item">
                            <a href="https://app.adjust.com/1455tm?utm_medium&#x3D;internal&amp;campaign&#x3D;homepage" target="_blank">
                                <img class="c-footer-icon c-icon--android" src="/assets/img/icons/appstore/android.svg" alt="Get it on Google Play" />
                            </a>
                        </li>
                </ul>
            </div>
            
            <div class="g-col g-span3 c-footer-social">
                <h2 class="c-footer-heading">Follow us</h2>
            
                <ul class="c-footer-list c-footer-list--inline">
                        <li class="c-footer-list-item">
                            <a href="https://www.facebook.com/justeat" target="_blank">
                                <img class="c-footer-icon c-footer-icon--social" src="/assets/img/icons/social/icon-facebook.svg" alt="Just Eat on Facebook" />
                            </a>
                        </li>
                        <li class="c-footer-list-item">
                            <a href="https://twitter.com/JustEatUK" target="_blank">
                                <img class="c-footer-icon c-footer-icon--social" src="/assets/img/icons/social/icon-twitter.svg" alt="Just Eat on Twitter" />
                            </a>
                        </li>
                        <li class="c-footer-list-item">
                            <a href="https://www.youtube.com/user/TVjusteat" target="_blank">
                                <img class="c-footer-icon c-footer-icon--social" src="/assets/img/icons/social/icon-youtube.svg" alt="Just Eat on YouTube" />
                            </a>
                        </li>
                </ul>
            </div>
            
            <div class="g-col g-span3 c-footer-feedback is-invisible" data-gtm-feedback>
                <h2 class="c-footer-heading">Feedback</h2>
                <p class="c-footer-feedbackText">
                    Help us improve our website
                    <a href="#" class="o-link--bold o-link--full">Send feedback</a>
                </p>
            </div>
        </div>
    </div>

    <div class="l-container c-footer-row">
        <div class="g g--stack--wide">
            <div class="g-col g-span8 c-footer-cards">
                <ul class="c-footer-list c-footer-list--inline">
                        <li class="c-footer-list-item"> 
                            <img class="c-footer-icon c-footer-icon--card c-icon--mastercard--securecode" src="/assets/img/icons/cards/mastercard--securecode.svg" alt="Mastercard" />
                        </li>
                        <li class="c-footer-list-item"> 
                            <img class="c-footer-icon c-footer-icon--card c-icon--visa--verified" src="/assets/img/icons/cards/visa--verified.svg" alt="Visa" />
                        </li>
                        <li class="c-footer-list-item"> 
                            <img class="c-footer-icon c-footer-icon--card c-icon--amex--safekey" src="/assets/img/icons/cards/amex--safekey.svg" alt="American Express" />
                        </li>
                </ul>
            </div>

            <div class="g-col g-span4 c-footer-countries">
                <div class="c-countrySelector">
                    <button type="button" class="o-btn o-btnLink c-countrySelector-link c-countrySelector-link--selected" data-toggle-target="countrySelector-list" data-test-id="countrySelector-button" aria-label="You are on the UK website. Click here to change.">
                        <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.gb.svg" alt="" />
                        <p data-test-id="countrySelector-current-country">United Kingdom</p>
                        <img class="c-countrySelector-chevron c-icon--chevron--small" src="/assets/img/icons/arrows/chevron.svg" alt="" />
                    </button>
                    <ul class="c-countrySelector-list is-hidden" data-toggle-name="countrySelector-list" data-test-id="countrySelector-list">
                            <li>
                                <a class="c-countrySelector-link" href="https://www.menulog.com.au">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.au.svg" alt="" />
                                    <p>Australia</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.ifood.com.br">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.br.svg" alt="" />
                                    <p>Brazil</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.ca">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.ca.svg" alt="" />
                                    <p>Canada</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.dk">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.dk.svg" alt="" />
                                    <p>Denmark</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.fr/">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.fr.svg" alt="" />
                                    <p>France</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.ie">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.ie.svg" alt="" />
                                    <p>Ireland</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.justeat.it">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.it.svg" alt="" />
                                    <p>Italy</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.menulog.co.nz">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.nz.svg" alt="" />
                                    <p>New Zealand</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.no">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.no.svg" alt="" />
                                    <p>Norway</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.just-eat.es">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.es.svg" alt="" />
                                    <p>Spain</p>
                                </a>
                            </li>
                            <li>
                                <a class="c-countrySelector-link" href="https://www.eat.ch">
                                    <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.ch.svg" alt="" />
                                    <p>Switzerland</p>
                                </a>
                            </li>
                        <li>
                            <button type="button" class="o-btn o-btnLink c-countrySelector-link c-countrySelector-link--selected" data-toggle-target="countrySelector-list">
                                <img class="c-icon--flag--small" src="/assets/img/icons/flags/flag.gb.svg" alt="" />
                                <p>United Kingdom</p>
                            </button>
                            <button type="button" class="o-btnLink" data-toggle-target="countrySelector-list" aria-label="Close">
                                <img class="c-countrySelector-cross" src="/assets/img/icons/operators/cross.svg" alt="" />
                            </button>
                        </li>
                    </ul>
                </div>

                <p class="c-footer-vatNumber is-hidden"></p>
            </div>
        </div>
    </div>
</footer>