Product card beta

A product card is used to display a snapshot of an item that is linked in some way to similar items, for example products we sell or recipes. It lets someone quickly identify a particular item of interest to them from a group, for example in search results.

Example

Example

HTML

                                        
<article class="coop-c-card coop-c-card--product coop-c-card--alcohol coop-l-flex__item">                           
    <a href="/products/gordons-pink-gin-817029" class="coop-c-card__link coop-l-flex__item" data-contenttype="Card|Product" data-linktext="Gordon's&nbsp;Premium Pink Gin 70cl">
        <div class="coop-c-card__image">
            <picture>
                <source 
                    srcset="//images.ctfassets.net/6jpeaipefazr/61if0aSq2WoqUo6cQsC0Sm/232f6b8924d90a68f9efb8e7db8df16e/gordons-pink-gin-817029.jpg?fm=webp&amp;q=60&amp;w=300&amp;h=300&amp;fit=pad 1x,
                            //images.ctfassets.net/6jpeaipefazr/61if0aSq2WoqUo6cQsC0Sm/232f6b8924d90a68f9efb8e7db8df16e/gordons-pink-gin-817029.jpg?fm=webp&amp;q=60&amp;w=600&amp;h=600&amp;fit=pad 2x" type="image/webp">
                <img 
                    srcset="//images.ctfassets.net/6jpeaipefazr/61if0aSq2WoqUo6cQsC0Sm/232f6b8924d90a68f9efb8e7db8df16e/gordons-pink-gin-817029.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=300&amp;h=300&amp;fit=pad 1x,
                            //images.ctfassets.net/6jpeaipefazr/61if0aSq2WoqUo6cQsC0Sm/232f6b8924d90a68f9efb8e7db8df16e/gordons-pink-gin-817029.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=600&amp;h=600&amp;fit=pad 2x" 
                    src="//images.ctfassets.net/6jpeaipefazr/61if0aSq2WoqUo6cQsC0Sm/232f6b8924d90a68f9efb8e7db8df16e/gordons-pink-gin-817029.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=300&amp;h=300&amp;fit=pad" alt="Gordon's&nbsp;Premium Pink Gin 70cl" title="Gordon's&nbsp;Premium Pink Gin 70cl" type="image/jpeg">
            </picture>
        </div>
        <div class="coop-c-card__content coop-l-flex__item">
            <h3 class="coop-c-card__title">Gordon's&nbsp;Premium Pink Gin 70cl </h3>
            <p class="coop-c-card__price">£18.50</p>
        </div>
    </a>
</article>
                                    

Design and content

A product card links to one item and contains a small amount of information, for example an image and important features, sufficient to help people make a decision whether to click on the card.

The whole area of a product card is active as a single link. Don’t include other actions within a card.

An important feature of a product card is the image is not obscured by any accompanying text, which makes it good for presenting products or anything where that is a consideration.

Cards are responsive and adapt well to changing views, whether displaying few cards or many.

Product cards are ideal for presenting groups of items that share common features or characteristics, for example data imported from a spreadsheet. If you are using cards to present more general, prose information on different subjects consider using editorial cards instead.

See examples of the product card component in use on www.coop.co.uk/products/wine and coop.co.uk/recipes.

Related components

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change