Product Card

Overview

The product card component is the main way to display a product version, including its price and features. They can be used to show different products, or versions of a product side-by-side.

Examples

Default variation

Example
External Link
From
$ 27
.50
/mo
+GST

Quick tagline to describe products main purpose

Show me more
  • Feature 1
  • Feature 2
  • Feature 3
  • Feature 4
  • Feature 5
  • Feature 6
Primary CTA Secondary CTA 
<div class="product-box product-box--center product-box--fg-candy" data-myob-accordion data-allow-all-closed="true">
  <div class="product-box__promote-banner"></div>
  <div class="product-box__head m-2">
    <div class="price">
  <div>From</div>
  <span class="price__currency">$</span>
  <span class="price__amount">27</span>
  <div class="price__suffix text-left">
    <div class="price__decimal">.50</div>
    <div class="price__frequency">/mo</div>
    <div class="price__info">+GST</div>
  </div>
</div>

    <p class="product-box__tagline mt-1">Quick tagline to describe products main purpose</p>
  </div>
  <div class="product-box__body" data-accordion-item>
    <a href="#" class="product-box__trigger">Show me more</a>
    <ul class="product-box__list list--tick py-1 py-2--md" data-equalizer-watch="" data-tab-content>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
    </ul>
  </div>
  <div class="btn-group m-1">
    <a href="" class="btn btn--primary btn--block">Primary CTA</a>
    <a href="" class="btn btn--bordered-secondary btn--block">Secondary CTA</a>
  </div>
</div>

Simple variation

Example
External Link

Essentials

From
$ 27
.50
/mo
+GST

Quick tagline to describe products main purpose

Primary CTA Secondary CTA 
<div class="product-box product-box--center product-box--fg-regal">
  <div class="product-box__promote-banner"></div>
  <div class="product-box__head m-2">
    <h3>Essentials</h3>
    <div class="price">
  <div>From</div>
  <span class="price__currency">$</span>
  <span class="price__amount">27</span>
  <div class="price__suffix text-left">
    <div class="price__decimal">.50</div>
    <div class="price__frequency">/mo</div>
    <div class="price__info">+GST</div>
  </div>
</div>

    <p class="product-box__tagline mt-1">Quick tagline to describe products main purpose</p>
  </div>
  <div class="btn-group m-1">
    <a href="" class="btn btn--primary btn--block">Primary CTA</a>
    <a href="" class="btn btn--bordered-secondary btn--block">Secondary CTA</a>
  </div>
</div>

Usage guidelines

Dos Donts
do iconDo group similar products within each Product Card to compare.
do-not iconDon't show more than 4 side-by-side.
do iconDo apply a hightlight colour to visually promote the product.
do-not iconDon't repeat any one highlight colour on more than one Product Card in a group.
do iconBe consistent by including the same buttons on each card within a group.
do-not iconDon't use multiple primary call-to-actions buttons.
do iconPlace the cheapest or most basic product on the left and the most expensive or feature rich product on the right.
do iconDisplay the correct '+GST' information if applicable.
do iconDisplay the correct discount information if applicable.
do iconIf using the Recommended variation, do populate with a helpful label, i.e: 'MOST POPULAR'

Implementation guidelines

Name Class Description
Alignment .product-box--left .product-box--center .product-box--right Change Card alignment within their container. Default is left.
Hightlight colour .product-box--fg-regal .product-box--fg-dusk .product-box--fg-rouge .product-box--fg-candy Change the top border, price and recommended tag colour.
Promote Card .pricing-box--promote Displays a callout area at the top of the Card in place of the border. Must be placed as the first child within the .product-box element. See code example for implementation.