Feature card

Feature cards are like Editorial cards but are combined with a squircle to highlight a deal.

Example

Example

HTML

                                    
<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>



                                    
<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">&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>


                                    

Design and content

A feature card can use any of the squircle types.

You can see feature cards in use on coop.co.uk.