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">
    <a href="/products/wine/product.html" class="coop-c-card__link">
        <div class="coop-c-card__image">
            <img src="/images/examples/components/cards/large_0135_wine-france-comtessesainthilaire.png" alt="Comtesse Saint Hilaire Montagne Saint Emilion red wine from France" class="coop-c-card__image-alcohol">
        </div>
        <div class="coop-c-card__content coop-c-card__content--alcohol">
            <h3 class="coop-c-card__title">Comtesse Saint Hilaire Montagne Saint Emilion</h3>
            <p class="coop-c-card__price">&pound;9.50</p>
            <div class="coop-c-card__content-bottom">
                <ul class="coop-c-list-tags">
                    <li class="coop-c-list-tags__item coop-c-icon">
                        <img class="coop-c-icon__left" src="/images/examples/components/tags/france.svg" alt="" height="28px" width="28px" /><span> France</span>
                    </li>
                    <li class="coop-c-tag coop-c-tag--wine-red">Red</li>
                    <li class="coop-c-tag coop-c-tag--vegetarian">Vegetarian*</li>
                </ul>
            </div>
        </div>
    </a>
</article>

                            
<article class="coop-c-card coop-c-card--product">
    <a href="/products/product.html" class="coop-c-card__link">
        <div class="coop-c-card__image">
            <img src="https://coop-design-system.herokuapp.com/images/examples/components/cards/P15-Chicken-Korma-Pilau-rice.jpg" alt="Co-op Chicken Korma and Pilau rice" class="coop-c-card__image-product">
        </div>
        <div class="coop-c-card__content">
            <h3 class="coop-c-card__title">Co-op Chicken Korma and Pilau rice</h3>
            <p class="coop-c-card__price">£4</p>
        </div>
    </a>
</article>

                            
<article class="coop-c-card coop-c-card--product">
    <a href="/products/product.html" class="coop-c-card__link">
        <div class="coop-c-card__image">
            <img src="https://coop-design-system.herokuapp.com/images/examples/components/cards/P15-Chicken-Korma-Pilau-rice.jpg" alt="Co-op Chicken Korma and Pilau rice" class="coop-c-card__image-product">
        </div>
        <div class="coop-c-card__content">
            <h3 class="coop-c-card__title">Co-op Chicken Korma and Pilau rice</h3>
            <p class="coop-c-card__price coop-c-card__price--sale">&pound;3 <span class="coop-c-card__price-was">was &pound;4</span></p>
            <div class="coop-c-card__content-bottom">
                <ul class="coop-c-list-tags">
                    <li class="coop-c-tag coop-c-tag--sale">Deal</li>
                </ul>
            </div>
        </div>
    </a>
</article>

                            
<article class="coop-c-card coop-c-card--product coop-l-flex__item">
    <a href="/products/product.html" class="coop-c-card__link coop-l-flex__item">
        <div class="coop-c-card__image">
            <img src="https://coop-design-system.herokuapp.com/images/examples/components/cards/P15-Chicken-Korma-Pilau-rice.jpg" alt="Co-op Chicken Korma and Pilau rice" class="coop-c-card__image-product">
        </div>
        <div class="coop-c-card__content coop-l-flex__item">
            <h3 class="coop-c-card__title">Co-op Chicken Korma and Pilau rice</h3>
            <p class="coop-c-card__price coop-c-card__price--deal">&pound;3 <span class="coop-c-card__price--deal-info">and part of any 2 for &pound;5 ready meal deal*</span></p>
            <div class="coop-c-card__content-bottom">
                <ul class="coop-c-list-tags">
                    <li class="coop-c-tag coop-c-tag--sale">Deal</li>
                </ul>
            </div>
        </div>
    </a>
</article>

                            

CSS

                            
/*=========================================
Card - product - Co-op front-end components
=========================================== */

@import "@coopdigital/foundations-vars";
@import "@coopdigital/component-card";

.coop-c-card--product {

  .coop-c-card__title {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .coop-c-card__image-product {
    padding: 0 var(--spacing-base);
  }

  .coop-c-card__link {
    overflow: hidden;
    padding-bottom: 5px;
    box-shadow: 0 5px 0 0 rgba(0,0,0,0.05);
    transition: box-shadow 200ms ease-in;

    &:hover {
      box-shadow: 0 5px 0 0 rgba(0,0,0,0.15);

      .coop-c-card__title {
        text-decoration: underline;
      }

      .coop-c-card__image {
        transform: none;
      }
    }

    .coop-c-card__title {
      font-size: 1.125rem;
      font-size: 18px;
      text-decoration: none;
    }

    .coop-c-card__content {
      box-shadow: none;
      flex: 1;
    }

    .coop-c-card__image {
      overflow: hidden;
      float: none;
      width: 100%;
      height: auto;
      transition: transform 200ms ease-in;
      text-align: center;

      .coop-c-card__image-src {
        display: block;
        width: 100%;
      }
    }

    .coop-c-card__image + .coop-c-card__content {
      position: relative;
      float: none;
      width: 100%;
      padding: 0 16px 5px 16px;
      margin: 0;
    }
  }

  .coop-c-card__content-bottom {

    .coop-c-icon {
      margin-bottom: 8px;
    }
  }

  .coop-c-card__paragraph {
    font-size: var(--type-base--body);
  }
}


.coop-c-card__price {
  font-weight: bold;
  font-size: 1.5rem;
  font-size: 24px;
}

.coop-c-card__price--sale {
  color: #D63A28;
}

.coop-c-card__price-was {
  display: block;
  color: var(--color-text);
  font-size: var(--type-base--body);
}


.coop-c-card__price--deal-info {
  display: block;
  color: #D63A28;
  font-size: var(--type-base--body);
}

.coop-c-card--alcohol {

  .coop-c-card__link {

    .coop-c-card__image+.coop-c-card__content--wine {
      padding-top: 0;
    }
  }
}

.coop-c-card__image-alcohol {
  width: 135px;
  margin: 12px auto 0 auto;
}

                            

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