Product card

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.




<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">
                    srcset="//;q=60&amp;w=300&amp;h=300&amp;fit=pad 1x,
                            //;q=60&amp;w=600&amp;h=600&amp;fit=pad 2x" type="image/webp">
                    srcset="//;fl=progressive&amp;q=60&amp;w=300&amp;h=300&amp;fit=pad 1x,
                            //;fl=progressive&amp;q=60&amp;w=600&amp;h=600&amp;fit=pad 2x" 
                    src="//;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">
        <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>

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 and

Related components