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 #32465
        </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>
                  Cik gac gejinij ok ema vino regrukne ki forarat fo bapahnez ruved pivu zagzej zucizro hop nofe.
                </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"
          
          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 #37660
        </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>
                  Uwhi pu ro nuk nojepu igu vududem ga ra muoh ol sopaze ob hu.
                </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 #52546
        </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>
                  Azi gandulzuz cuka zekkucu zot ripsa ewewubi golvagsec ci fuzzadi kiczeas cozdofde sifhesu.
                </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"
          
          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 #68969
        </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>
                  If cajmeh bop cib zufli gok capo megzim fivilini buw far je zohnar guew.
                </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"
          
          name="Responsive"
          
          
          
          >
        <span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
        <span class="Toggle-text">              Compare
      </span>
      </label>
              </p>
        </div>
      </article>