Examples of the various states that the menu header can be in.
<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>
<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>
<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>
<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>
<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>
<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>
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>
Kebab Pizza
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>
Kebab Pizza
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>