Feature card
<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">£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&q=60&w=393&h=223 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=786&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&q=60&w=484&h=272 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=968&h=544 2x" type="image/webp"> <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=565&h=317 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=1130&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&fl=progressive&q=60&w=393&h=223 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=786&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&fl=progressive&q=60&w=484&h=272 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=968&h=544 2x" type="image/jpeg"> <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=565&h=317 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=968&h=544 2x" type="image/jpeg"> <!-- fallback --> <img src="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=565&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>
<article class="coop-c-featureCard coop-c-featureCard--horizontal"> <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">£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&q=60&w=393&h=223 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=786&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&q=60&w=484&h=272 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=968&h=544 2x" type="image/webp"> <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=565&h=317 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=webp&q=60&w=1130&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&fl=progressive&q=60&w=393&h=223 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=786&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&fl=progressive&q=60&w=484&h=272 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=968&h=544 2x" type="image/jpeg"> <source srcset="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=565&h=317 1x, //images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=968&h=544 2x" type="image/jpeg"> <!-- fallback --> <img src="//images.ctfassets.net/bffxiku554r1/4I6mfcw4KKWLwKbuFmM2U/2760269e1cb9df95ef689ae108ec91e0/BBQ-Outdoor_Main_master_55210.jpg?fm=jpg&fl=progressive&q=60&w=565&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>