Hero banner

Use the hero banner as the first component on the page. It should contain the page title and give an overview of what the page is about.

Example

Example

Supporting communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

Supporting communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

Supporting communities

How Co-op is supporting local communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

Supporting communities

How Co-op is supporting local communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

Supporting communities

How Co-op is supporting local communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

Spicy dinner deals

P14-Indian-1200x676

Treat everyone to a flavour packed Indian meal tonight with our great offers on takeaway favourites you can easily make at home. Choose your rice, sauce and delicious naan or chutney and get ready to spice things up for a low price.

Until 20 October 2020

HTML

                                    
<div class="coop-c-hero coop-c-hero--squircle">
    <div class="coop-c-hero__inner coop-u-clearfix">
        <h1 class="coop-c-hero__title">Supporting communities</h1>
        <div class="coop-c-hero__body">
            <p>Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.</p>
        </div>
    </div>
</div>

<div class="coop-c-hero coop-c-hero--squircle">
    <div class="coop-c-hero__inner coop-u-clearfix">
        <h1 class="coop-c-hero__title">Supporting communities</h1>
        <div class="coop-c-hero__body">
            <p>Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.</p>
        </div>
        <div class="coop-c-hero__squircle" aria-hidden="true">
            <div class="coop-c-hero__squircle__inner">
                <svg class="coop-c-hero__squircle__svg" viewBox="0 0 1802 1726">
                    <path class="coop-c-hero__squircle__path" d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z" />
                </svg>
            </div>
        </div>
    </div>
</div>

<div class="coop-c-hero coop-c-hero--squircle coop-c-hero--media coop-u-white">
    <div class="coop-c-hero__inner coop-u-clearfix">
        <h1 class="coop-c-hero__title">Supporting communities</h1>
        <div class="coop-c-hero__media">
          <picture class="coop-c-hero__image">
              <!-- if browser supports webp image format, serve the webp format-->
              <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                              //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
              <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                              //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
              <!-- if no webp supported then default to serve progressive jpeg -->
              <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                              //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
              <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                              //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
              <!-- fallback -->
              <img src="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338" width="600" height="338" alt="How Co-op is supporting local communities">
          </picture>
        </div>
        <div class="coop-c-hero__body">
            <p>Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.</p>
            <div class="coop-c-hero__link">
                <a href="https://coop.co.uk" class="coop-t-link-white">More about how Co-op is supporting communities</a>
            </div>
        </div>
        <div class="coop-c-hero__squircle" aria-hidden="true">
            <div class="coop-c-hero__squircle__inner">
                <svg class="coop-c-hero__squircle__svg coop-u-magenta-dark-3-fill" viewBox="0 0 1802 1726">
                    <path class="coop-c-hero__squircle__path" d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z" />
                </svg>
            </div>
        </div>
    </div>
</div>

<div class="coop-c-hero coop-c-hero--squircle coop-c-hero--media">
  <div class="coop-c-hero__inner coop-u-clearfix">
      <h1 class="coop-c-hero__title">Supporting communities</h1>
      <div class="coop-c-hero__media">
        <picture class="coop-c-hero__image">
            <!-- if browser supports webp image format, serve the webp format-->
            <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
            <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
            <!-- if no webp supported then default to serve progressive jpeg -->
            <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
            <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
            <!-- fallback -->
            <img src="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338" width="600" height="338" alt="How Co-op is supporting local communities">
        </picture>
      </div>
      <div class="coop-c-hero__body">
          <p>Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.</p>
          <div class="coop-c-hero__link">
              <a href="https://coop.co.uk" class="coop-btn coop-btn--primary">Find out how you can help</a>
          </div>
      </div>
      <div class="coop-c-hero__squircle" aria-hidden="true">
          <div class="coop-c-hero__squircle__inner">
              <svg class="coop-c-hero__squircle__svg" viewBox="0 0 1802 1726">
                  <path class="coop-c-hero__squircle__path" d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z" />
              </svg>
          </div>
      </div>
  </div>
</div>

<div class="coop-c-hero coop-c-hero--squircle coop-c-hero--media coop-c-hero--pull">
  <div class="coop-c-hero__inner coop-u-clearfix">
      <h1 class="coop-c-hero__title">Supporting communities</h1>
      <div class="coop-c-hero__media">
        <picture class="coop-c-hero__image">
            <!-- if browser supports webp image format, serve the webp format-->
            <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
            <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
            <!-- if no webp supported then default to serve progressive jpeg -->
            <source media="(min-width: 60em)" srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
            <source srcset="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                            //images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
            <!-- fallback -->
            <img src="//images.ctfassets.net/bffxiku554r1/7XDwxNP8ioupeMdJZxNS8/d23d2b802d6be0ecbcb7abd1ff33b159/coop-supporting-local-communities.png?fm=png&amp;q=60&amp;w=600&amp;h=338" width="600" height="338" alt="How Co-op is supporting local communities">
        </picture>
      </div>
      <div class="coop-c-hero__body">
          <p>Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.</p>
          <div class="coop-c-hero__link">
              <a href="https://coop.co.uk" class="coop-btn coop-btn--primary">Find out how you can help</a>
          </div>
      </div>
      <div class="coop-c-hero__squircle" aria-hidden="true">
          <div class="coop-c-hero__squircle__inner">
              <svg class="coop-c-hero__squircle__svg" viewBox="0 0 1802 1726">
                  <path class="coop-c-hero__squircle__path" d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z" />
              </svg>
          </div>
      </div>
  </div>
</div>
<div class="coop-l-container">
    <div class="coop-l-grid">
        <div class="coop-l-grid__item coop-l-grid__item--large-4 coop-l-grid__item--medium-6 coop-u-margin-t-64">
            
<article class="coop-c-featureCard">
	<a class="coop-c-featureCard__link"
		href="https://coop.co.uk"
		data-contenttype="Card|FeatureCard"
		data-contentparent=""
		data-linktext="">
        <div class="coop-c-featureCard__squircle coop-u-flex coop-u-flex-centered ">
            <span class=" coop-c-featureCard__squircle__label">
                <span class="coop-c-featureCard__squircle__small-text">3 for</span>
                <span class="coop-c-featureCard__squircle__large-text coop-c-featureCard__squircle--text-pull">&pound;10</span>
            </span>
            <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58">
                <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                        c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                        S60.3,19.6,59,15L59,15z" />
                </svg>
            </span>
        </div>
        <figure class="coop-c-featureCard__media">
            <picture class="coop-c-featureCard__media-wrap coop-c-featureCard__media-wrap--16-9">
                <!-- if browser supports webp image format, serve the webp format-->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                <!-- if no webp supported then default to serve progressive jpeg -->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <!-- fallback -->
                <img src="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
            </picture>
        </figure>
        <div class="coop-c-featureCard__content">
            <h3 class="coop-c-featureCard__title">Get the barbecue ready with a great deal on 100% British meat</h3>
        </div>
    </a>
</article>



        </div>
        <div class="coop-l-grid__item coop-l-grid__item--large-4 coop-l-grid__item--medium-6 coop-u-margin-t-64">
          
<article class="coop-c-featureCard">
	<a class="coop-c-featureCard__link"
		href="https://coop.co.uk"
		data-contenttype="Card|FeatureCard"
		data-contentparent=""
		data-linktext="">
        <div class="coop-c-featureCard__squircle coop-u-flex coop-u-flex-centered ">
            <span class=" coop-c-featureCard__squircle__label">
                <span class="coop-c-featureCard__squircle__small-text">3 for</span>
                <span class="coop-c-featureCard__squircle__large-text coop-c-featureCard__squircle--text-pull">&pound;10</span>
            </span>
            <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58">
                <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                        c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                        S60.3,19.6,59,15L59,15z" />
                </svg>
            </span>
        </div>
        <figure class="coop-c-featureCard__media">
            <picture class="coop-c-featureCard__media-wrap coop-c-featureCard__media-wrap--16-9">
                <!-- if browser supports webp image format, serve the webp format-->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                <!-- if no webp supported then default to serve progressive jpeg -->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <!-- fallback -->
                <img src="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
            </picture>
        </figure>
        <div class="coop-c-featureCard__content">
            <h3 class="coop-c-featureCard__title">Get the barbecue ready with a great deal on 100% British meat</h3>
        </div>
    </a>
</article>



        </div>
        <div class="coop-l-grid__item coop-l-grid__item--large-4 coop-l-grid__item--medium-6 coop-u-margin-t-64">
          
<article class="coop-c-featureCard">
	<a class="coop-c-featureCard__link"
		href="https://coop.co.uk"
		data-contenttype="Card|FeatureCard"
		data-contentparent=""
		data-linktext="">
        <div class="coop-c-featureCard__squircle coop-u-flex coop-u-flex-centered ">
            <span class=" coop-c-featureCard__squircle__label">
                <span class="coop-c-featureCard__squircle__small-text">3 for</span>
                <span class="coop-c-featureCard__squircle__large-text coop-c-featureCard__squircle--text-pull">&pound;10</span>
            </span>
            <span class="coop-c-featureCard__squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                <svg class="coop-c-featureCard__squircle__svg" viewBox="0 0 61 58">
                <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                        c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                        S60.3,19.6,59,15L59,15z" />
                </svg>
            </span>
        </div>
        <figure class="coop-c-featureCard__media">
            <picture class="coop-c-featureCard__media-wrap coop-c-featureCard__media-wrap--16-9">
                <!-- if browser supports webp image format, serve the webp format-->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                <!-- if no webp supported then default to serve progressive jpeg -->
                <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                            //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                <!-- fallback -->
                <img src="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
            </picture>
        </figure>
        <div class="coop-c-featureCard__content">
            <h3 class="coop-c-featureCard__title">Get the barbecue ready with a great deal on 100% British meat</h3>
        </div>
    </a>
</article>



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

<div class="coop-c-hero coop-c-hero--squircle coop-c-hero--media coop-u-white">
  <div class="coop-c-hero__inner coop-u-clearfix">
      <h1 class="coop-c-hero__title">Spicy dinner deals</h1>
      <div class="coop-c-hero__media">
        <picture class="coop-c-hero__image"><source media="(min-width: 60em)" srcset="//images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                    //images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
          <source srcset="//images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=webp&amp;q=60&amp;w=600&amp;h=338 1x,
                    //images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=webp&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/webp">
          <source media="(min-width: 60em)" srcset="//images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                    //images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
          <source srcset="//images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=png&amp;q=60&amp;w=600&amp;h=338 1x,
                    //images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=png&amp;q=60&amp;w=1200&amp;h=676 2x" type="image/jpeg">
          <img src="//images.ctfassets.net/6jpeaipefazr/2IlXqo2uT7VPCK2uOndSsj/baa75ac66f835a2a87f16c3e4633894c/P14-Indian-1200x676.png?fm=png&amp;q=60&amp;w=600&amp;h=338" width="600" height="338" alt="P14-Indian-1200x676">
        </picture>
      </div>
    <div class="coop-c-hero__body">
      <p>Treat everyone to a flavour packed Indian meal tonight with our great offers on takeaway favourites you can easily make at home. Choose your rice, sauce and delicious naan or chutney and get ready to spice things up for a low price.</p> 
      <p class="coop-c-hero__end-date">
          <svg width="20" height="21" xmlns="http://www.w3.org/2000/svg">
            <mask id="a" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
            <path d="M10 .25c1.3802 0 2.6758.26041 3.8867.78125 1.211.52084 2.2689 1.23372 3.1738 2.13867.905.90495 1.6211 1.96289 2.1485 3.17383C19.7363 7.55469 20 8.85676 20 10.25c0 1.3932-.2604 2.6953-.7812 3.9062-.5209 1.211-1.2338 2.2689-2.1387 3.1739-.905.9049-1.9629 1.6178-3.1739 2.1387-1.2109.5208-2.513.7812-3.9062.7812-1.39324 0-2.69856-.2604-3.91602-.7812-1.21745-.5209-2.27538-1.2338-3.17382-2.1387-.89845-.905-1.60807-1.9629-2.12891-3.1739C.26041 12.9453 0 11.6432 0 10.25c0-1.39324.26041-2.69856.78125-3.91602.52084-1.21745 1.23372-2.27538 2.13867-3.17382.90495-.89845 1.96289-1.60807 3.17383-2.12891C7.30469.51041 8.60676.25 10 .25zM10 19c1.1979 0 2.3307-.2311 3.3984-.6934 1.0678-.4622 1.9955-1.0904 2.7832-1.8847.7878-.7943 1.4128-1.722 1.875-2.7832.4623-1.0612.6934-2.1908.6934-3.3887 0-1.19792-.2311-2.33072-.6934-3.39844-.4622-1.06771-1.0904-1.99544-1.8847-2.7832-.7943-.78776-1.722-1.41276-2.7832-1.875S11.1979 1.5 10 1.5c-1.19792 0-2.33072.23112-3.39844.69336-1.06771.46224-1.99544 1.09049-2.7832 1.88476-.78776.79428-1.41276 1.72201-1.875 2.78321S1.25 9.05208 1.25 10.25c0 1.1979.23112 2.3275.69336 3.3887s1.09049 1.9889 1.88476 2.7832c.79428.7943 1.72201 1.4225 2.78321 1.8847C7.67253 18.7689 8.80208 19 10 19zm5.3125-6.0547c.1563.0912.2474.2181.2734.3809.0261.1627-.026.3222-.1562.4785-.0261.1042-.0912.1823-.1953.2344-.1042.052-.2018.0781-.293.0781-.0391 0-.0846-.013-.1367-.0391-.0521-.026-.1107-.0521-.1758-.0781l-4.0625-2.5586c-.0911.0651-.1888.1107-.293.1367-.1041.0261-.2148.0391-.33199.0391-.37761 0-.69011-.1237-.9375-.3711-.2474-.2474-.3711-.5599-.3711-.9375 0-.2474.0586-.4655.17578-.6543.11719-.18881.28646-.3418.50782-.45899v-5c0-.19531.05533-.3483.16601-.45898s.26367-.16602.45899-.16602c.18229 0 .33199.05534.44919.16602.1172.11068.1758.26367.1758.45898v5c.2214.09115.3906.23763.5078.43946.1172.20182.1758.42643.1758.67383v.0586l4.0625 2.5781z" fill="#fff"></path></mask><g mask="url(#a)"><path d="M10 .25c1.3802 0 2.6758.26041 3.8867.78125 1.211.52084 2.2689 1.23372 3.1738 2.13867.905.90495 1.6211 1.96289 2.1485 3.17383C19.7363 7.55469 20 8.85676 20 10.25c0 1.3932-.2604 2.6953-.7812 3.9062-.5209 1.211-1.2338 2.2689-2.1387 3.1739-.905.9049-1.9629 1.6178-3.1739 2.1387-1.2109.5208-2.513.7812-3.9062.7812-1.39324 0-2.69856-.2604-3.91602-.7812-1.21745-.5209-2.27538-1.2338-3.17382-2.1387-.89845-.905-1.60807-1.9629-2.12891-3.1739C.26041 12.9453 0 11.6432 0 10.25c0-1.39324.26041-2.69856.78125-3.91602.52084-1.21745 1.23372-2.27538 2.13867-3.17382.90495-.89845 1.96289-1.60807 3.17383-2.12891C7.30469.51041 8.60676.25 10 .25zM10 19c1.1979 0 2.3307-.2311 3.3984-.6934 1.0678-.4622 1.9955-1.0904 2.7832-1.8847.7878-.7943 1.4128-1.722 1.875-2.7832.4623-1.0612.6934-2.1908.6934-3.3887 0-1.19792-.2311-2.33072-.6934-3.39844-.4622-1.06771-1.0904-1.99544-1.8847-2.7832-.7943-.78776-1.722-1.41276-2.7832-1.875S11.1979 1.5 10 1.5c-1.19792 0-2.33072.23112-3.39844.69336-1.06771.46224-1.99544 1.09049-2.7832 1.88476-.78776.79428-1.41276 1.72201-1.875 2.78321S1.25 9.05208 1.25 10.25c0 1.1979.23112 2.3275.69336 3.3887s1.09049 1.9889 1.88476 2.7832c.79428.7943 1.72201 1.4225 2.78321 1.8847C7.67253 18.7689 8.80208 19 10 19zm5.3125-6.0547c.1563.0912.2474.2181.2734.3809.0261.1627-.026.3222-.1562.4785-.0261.1042-.0912.1823-.1953.2344-.1042.052-.2018.0781-.293.0781-.0391 0-.0846-.013-.1367-.0391-.0521-.026-.1107-.0521-.1758-.0781l-4.0625-2.5586c-.0911.0651-.1888.1107-.293.1367-.1041.0261-.2148.0391-.33199.0391-.37761 0-.69011-.1237-.9375-.3711-.2474-.2474-.3711-.5599-.3711-.9375 0-.2474.0586-.4655.17578-.6543.11719-.18881.28646-.3418.50782-.45899v-5c0-.19531.05533-.3483.16601-.45898s.26367-.16602.45899-.16602c.18229 0 .33199.05534.44919.16602.1172.11068.1758.26367.1758.45898v5c.2214.09115.3906.23763.5078.43946.1172.20182.1758.42643.1758.67383v.0586l4.0625 2.5781z" class="coop-u-white-fill"></path>
            <path d="M22 22H-2V-2h24v24z" class="coop-u-white-fill"></path></g></svg>
          <span>Until 20 October 2020</span>
        </p></div>
    <div class="coop-c-hero__squircle" aria-hidden="true">
      <div class="coop-c-hero__squircle__inner ">
        <svg class="coop-c-hero__squircle__svg coop-u-blue-dark-3-fill" viewBox="0 0 1802 1726">
          <path class="coop-c-hero__squircle__path" d="M1743 446.3c-49.7-167.6-173.7-299.6-339.6-362C1079.6-28.2 724.1-28.2 397 84.9 232.6 146.7 109.2 278.6 58.5 446.8 19.7 581.6 0 721.4 0 862.8s19.7 281.2 58.5 416.5c50.8 167.6 174.2 299.6 339.6 362 162.2 56.2 331.5 84.7 502.9 84.7 172 0 341.3-28.4 504-85.2 164.9-62.4 288.3-193.8 338-362 39.4-135.8 59-275.6 59-416s-19.7-280.6-59-416.5z"></path>
        </svg>
      </div>
    </div>
  </div>
</div>
                                    

Design and content

The page title (H1) and lead paragraph are mandatory parts of the hero banner.

Optional elements are:

  • supporting image
  • squircle background shape
  • link
  • button
  • ‘content pull’ CSS class
  • end date

The supporting image must relate to the content and help a user understand the content more quickly. It must have an alt tag.

The squircle background can have a range of colours applied to it. See the colour palette for more options. Helper classes to apply the background colour can be found in the foundations-colour package.

To ensure the correct focus outline is used on a light or dark colour you should apply either the .coop-t-link-white or .coop-t-link-black class in your HTML. This overrides the default purple focus outline colour.

The content pull (.coop-c-hero–pull) brings the content below the hero up so it overlaps the bottom of the squirlce to bring the page elements together and create depth. We recommend when using this technique the content in the hero and the content on the row below are related.