UI Templates

Menu Header Variations

Examples of the various states that the menu header can be in.

Delivery Open

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

3 stars out of 6. 566 total ratings.

Delivery free • Min order £10 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-30"></span>
                    </div>
                    <span class="is-visuallyHidden"> 3 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
</header>

Delivery Pre-order

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

3 stars out of 6. 566 total ratings.

Order now • Delivering from 18:30 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-30"></span>
                    </div>
                    <span class="is-visuallyHidden"> 3 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Order now • Delivering from 18:30

            </p>
        </div>
    </div>
</header>

No Reviews

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

0 stars out of 6.

Delivery free • Min order £10 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-00"></span>
                    </div>
                    <span class="is-visuallyHidden"> 0 stars out of 6.</span>
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
</header>

Closed

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

3 stars out of 6. 566 total ratings.

Not taking orders 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-30"></span>
                    </div>
                    <span class="is-visuallyHidden"> 3 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Not taking orders

            </p>
        </div>
    </div>
</header>

New

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

New
3 stars out of 6. 566 total ratings.

Delivery free • Min order £10 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                    New
                <a class="l-centered u-noUnderline u-spacingLeft" href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-30"></span>
                    </div>
                    <span class="is-visuallyHidden"> 3 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
</header>

BTA Winner

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

6 stars out of 6. 566 total ratings.

BTA winner 2017, 2018

Delivery free • Min order £10 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-60"></span>
                    </div>
                    <span class="is-visuallyHidden"> 6 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            

                BTA winner 2017, 2018
            

            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
</header>

With Note

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

6 stars out of 6. 566 total ratings.

Delivery free • Min order £10

Note from the Restaurant: All our dishes are dairy free, except for our mango & Customers are advised to let the restaurant know if any food may cause allergic reaction prior to order. If you would like to know the list of ingredients used in a particular dish from the menu, the restaurant will be happy to assist you.

Please inform the restaurant directly if you have any allergies or dietary requirements, please ask for avoid dishes contain molluscs, lupin, sulphites, sesame, mustard, celery, nuts, milk, soyabeans, peanuts, fish, eggs, crustaceans, cereals containing gluten.


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large " style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-60"></span>
                    </div>
                    <span class="is-visuallyHidden"> 6 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
    

        
        
Note from the Restaurant: All our dishes are dairy free, except for our mango & Customers are advised to let the restaurant know if any food may cause allergic reaction prior to order. If you would like to know the list of ingredients used in a particular dish from the menu, the restaurant will be happy to assist you.

        
Please inform the restaurant directly if you have any allergies or dietary requirements, please ask for avoid dishes contain molluscs, lupin, sulphites, sesame, mustard, celery, nuts, milk, soyabeans, peanuts, fish, eggs, crustaceans, cereals containing gluten.

    

</header>

With Offer

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

6 stars out of 6. 566 total ratings.

Offer 20% off today on orders over £30

Delivery free • Min order £10

20% off today on orders over £30 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large c-card--noPadBottom" style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-60"></span>
                    </div>
                    <span class="is-visuallyHidden"> 6 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            

                Offer
                20% off today on orders over £30
            

            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
    

        
        20% off today on orders over £30
    

</header>

With Note & Offer

Example

Fozzie Kebab

Fozzie Kebab

Restaurant info

Kebab Pizza

6 stars out of 6. 566 total ratings.

Offer 20% off today on orders over £30

Delivery free • Min order £10

Note from the Restaurant: All our dishes are dairy free, except for our mango & Customers are advised to let the restaurant know if any food may cause allergic reaction prior to order. If you would like to know the list of ingredients used in a particular dish from the menu, the restaurant will be happy to assist you.

Please inform the restaurant directly if you have any allergies or dietary requirements, please ask for avoid dishes contain molluscs, lupin, sulphites, sesame, mustard, celery, nuts, milk, soyabeans, peanuts, fish, eggs, crustaceans, cereals containing gluten.

20% off today on orders over £30 


<header class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large c-card--noPadBottom" style="z-index: 1;">
    <div class="c-mediaElement c-mediaElement--fullstack">
        <img
            class="c-mediaElement-img c-mediaElement-img--outlined c-mediaElement-img--negativeTop"
            src="/assets/img/examples/restaurant-logo.gif"
            alt="Fozzie Kebab"
            itemprop="image" />
        <div class="c-mediaElement-content">
            <h1 class="u-text-center u-noSpacing">Fozzie Kebab</h1>
            <a class="c-mediaElement-infoLink u-showAboveMid" href="">
                
                <span class="u-spacingLeft u-showAboveWide">Restaurant info</span>
            </a>
            <p class="l-centered u-noSpacing">
                <span class="c-badge c-badge--light c-badge--large">Kebab <span class="c-badge-icon"></span> Pizza</span>
            </p>
            <div class="l-centered u-spacingTop">
                <a class="l-centered u-noUnderline " href="">
                    <div class="c-rating ">
                       <span class="c-rating--fill c-ratings--fill-60"></span>
                    </div>
                    <span class="is-visuallyHidden"> 6 stars out of 6.</span>
                        
                            566
                             total ratings.
                        
                </a>
            </div>
            

                Offer
                20% off today on orders over £30
            

            <p class="l-centered u-spacingBottom--large">
                
    
    Delivery free • Min order £10

            </p>
        </div>
    </div>
    

        
        
Note from the Restaurant: All our dishes are dairy free, except for our mango & Customers are advised to let the restaurant know if any food may cause allergic reaction prior to order. If you would like to know the list of ingredients used in a particular dish from the menu, the restaurant will be happy to assist you.

        
Please inform the restaurant directly if you have any allergies or dietary requirements, please ask for avoid dishes contain molluscs, lupin, sulphites, sesame, mustard, celery, nuts, milk, soyabeans, peanuts, fish, eggs, crustaceans, cereals containing gluten.

    

    

        
        20% off today on orders over £30
    

</header>