Product Card

Default

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 u-textWeightBold u-textSize2">
      Default
  </h4>

  <p class="ProductTitle-model u-textDarkGray">
    Model #23337
  </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>
            Rabiowu vuz zipal efi pe pigerego ab bifal ed foog canpojvec bouwhep.
          </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>

Simple

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 ">
  <a class="ProductCard-main" href="">
    <header class="ProductTitle ">
  <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
      Simple
  </h4>

  <p class="ProductTitle-model u-textDarkGray">
    Model #73325
  </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>
            Ufsatsu ban de vainef fazeb nebopsah feto risaw faje gor kirbefe boporop wenciwbi.
          </p>
      </div>
    </div>
  </a>
</article>

Rounded

Add the ProductCard--rounded modifier class to always use rounded corners. Useful for cards that will never be displayed full-bleed.

<article class="ProductCard ProductCard--rounded">
  <a class="ProductCard-main" href="">
    <header class="ProductTitle ">
  <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
      Rounded
  </h4>

  <p class="ProductTitle-model u-textDarkGray">
    Model #22567
  </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>
            Sitip gewto tofegti jihe zif ke ofcuk iho fosopbu ah lavihupo nuwje bofaja sorja zavkit decguw muwuz epijfeh.
          </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.rounded" name="Rounded">
        <span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
        <span class="Toggle-text"> Compare
        </span>
      </label>
    </p>
  </div>
</article>

Responsive

By default the layout of the card changes from horizontal to vertical at the small breakpoint. We've added some modifier classes to adjust the breakpoint the layout shift changes.

  • ProductCard--mdVertical: Switch to vertical layout at medium breakpoint.
  • ProductCard--lgVertical: Switch to vertical layout at large breakpoint.
  • ProductCard--horizontal: Keep the horizontal layout at all breakpoints.
<article class="ProductCard ProductCard--lgVertical">
  <a class="ProductCard-main" href="">
    <header class="ProductTitle ">
  <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
      Responsive
  </h4>

  <p class="ProductTitle-model u-textDarkGray">
    Model #102029
  </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>
            Ser icarwec doh bezow ticere fizi al riduzeh hi it ikusiku hud.
          </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.responsive" name="Responsive">
        <span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
        <span class="Toggle-text"> Compare
        </span>
      </label>
    </p>
  </div>
</article>