Product Card

Pattern for showcasing a product summary, intended for use in listing pages.

Shifts its layout slightly starting at --sm-viewport, the ideal breakpoint for arranging this element side-by-side with padding.

<article class="ProductCard ">
  <a class="ProductCard-main" href="">
    <header class="ProductTitle">
  <h4 class="ProductTitle-heading">
    Default Product Title
  </h4>
  <p class="ProductTitle-model u-textDarkGray">
    Model #104379
  </p>
  <ul class="ProductTitle-flags">
      <li>
        <img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
      </li>
      <li>
        <img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
      </li>
  </ul>
</header>

    <div class="ProductCard-body">
      <img class="ProductCard-object " src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
      <div class="ProductCard-content ">
          <p>
            Ladguuwo tirhul umoew el pulzes juvabun zudafkel funaw gelamzor razicfaw jisrow mapoba hi nu id er wehfig.
          </p>
      </div>
    </div>
  </a>
  <div class="ProductCard-actions">
    <p>
      <a class="ProductCard-primaryAction" href="">
        Details
        <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
  <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
      </a>
    </p>
    <p class="ProductCard-secondaryAction">
      <label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
        <input class="Toggle-state " type="checkbox" id="patterns.components.product-card.default" name="Default">
        <span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
        <span class="Toggle-text"> Compare
        </span>
      </label>
    </p>
  </div>
</article>

A simplified ProductCard pattern, that excludes the ProductCard-actions content and prevents the shifting of the card's layout as the viewport width changes, by use of a ProductCard-object--large modifier class. This allows for more visual emphasis on the ProductCard-object when less information is present and there is more empty space to utilize in the pattern - especially for small screens.

  • ProductCard-object--large: This modifier enforces consistent size of ProductCard-object content across all screen sizes.
<article class="ProductCard ProductCard">
  <a class="ProductCard-main" href="">
    <header class="ProductTitle">
  <h4 class="ProductTitle-heading">
    Default Product Title
  </h4>
  <p class="ProductTitle-model u-textDarkGray">
    Model #80083
  </p>
  <ul class="ProductTitle-flags">
      <li>
        <img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
      </li>
      <li>
        <img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
      </li>
  </ul>
</header>

    <div class="ProductCard-body">
      <img class="ProductCard-object ProductCard-object--large" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
      <div class="ProductCard-content u-spaceItems04">
          <p>
            Epu vujen so fukecif ar geb zu fohmi roaka use ri kugvo je.
          </p>
      </div>
    </div>
  </a>
</article>