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
Essentials
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
<div
class="product-box product-box--center product-box--fg-candy accordion"
data-myob-accordion
data-accordion-open-on="large"
>
<div class="product-box__head">
<label class="product-box__product-tag">MYOB Business</label>
<h3 class="product-box__title">Essentials</h3>
<div class="price price--left mb-1">
<div class="fg-grey-700">from</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal"><strong>.50<span class="price__caret">^</span></strong></div>
<div class="price__frequency"><strong>/mo +GST</strong></div>
</div>
</div>
<p class="product-box__tagline mt-1"><strong><em>Quick tagline to describe products main purpose</em></strong></p>
</div>
<div class="product-box__body accordion__item" data-accordion-item>
<a
href="#"
class="product-box__trigger"
data-accordion-toggle
data-accordion-target="feature_list_default"
>
Show me more
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="feature_list_default">
<div data-equalizer-watch="" class="product-box__panel-item">
<ul class="product-box__list list--tick" data-equalizer-watch="">
<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>
</div>
<div class="product-box__footer">
<div class="btn-group">
<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>
</div>Recommended variation
Essentials
from
$
27
.50^
/mo +GST
For the first 12 months
Quick tagline to describe products main purpose
Show me more
- Feature 1
- Feature 2
- Feature 3
- Feature 4
- Feature 5
- Feature 6
Optional payroll*
Add extra employees for: $1.50 per employee per month
<div
class="product-box product-box--center product-box--fg-grey-900 accordion"
data-myob-accordion
data-accordion-open-on="large"
>
<div class="product-box__promote-banner">Most popular</div>
<div class="product-box__head">
<label class="product-box__product-tag">MYOB Business</label>
<h3 class="product-box__title">Essentials</h3>
<div class="price price--left mb-1">
<div class="fg-grey-700">from</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal"><strong>.50<span class="price__caret">^</span></strong></div>
<div class="price__frequency"><strong>/mo +GST</strong></div>
</div>
</div>
<div class="fg-grey-700">For the first <strong>12 months</strong></div>
<div class="fg-red"><del><strong>from $30/month</strong></del></div>
<p class="product-box__tagline mt-1"><strong><em>Quick tagline to describe products main purpose</em></strong></p>
</div>
<div class="product-box__body accordion__item" data-accordion-item>
<a
href="#"
class="product-box__trigger"
data-accordion-toggle
data-accordion-target="feature_list_recommended"
>
Show me more
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="feature_list_recommended">
<div data-equalizer-watch="" class="product-box__panel-item">
<ul class="product-box__list list--tick" >
<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 class="product-box__option-container">
<h6>Optional payroll*</h6>
<div>Add extra employees for: $1.50 per employee per month</div>
</div>
</div>
</div>
</div>
<div class="product-box__footer">
<div class="btn-group">
<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>
</div>Simple variation
Essentials
from
$
27
.50^
/mo +GST
Quick tagline to describe products main purpose
<div class="product-box product-box--center product-box--fg-regal">
<div class="product-box__promote-banner"></div>
<div class="product-box__head">
<label class="product-box__product-tag">MYOB Business</label>
<h3 class="product-box__title">Essentials</h3>
<div class="price price--left mb-1">
<div class="fg-grey-700">from</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal"><strong>.50<span class="price__caret">^</span></strong></div>
<div class="price__frequency"><strong>/mo +GST</strong></div>
</div>
</div>
<p class="product-box__tagline"><strong><em>Quick tagline to describe products main purpose</em></strong></p>
</div>
<div class="product-box__footer">
<div class="btn-group">
<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>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do group similar products within each Product Card to compare.
|
 Don't show more than 4 side-by-side.
|
|
Do apply a hightlight colour to visually promote the product.
|
Don't repeat any one highlight colour on more than one Product Card in a group.
|
|
Be consistent by including the same buttons on each card within a group.
|
Don't use multiple primary call-to-actions buttons.
|
|
Place the cheapest or most basic product on the left and the most expensive or feature rich product on the right.
|
|
|
Display the correct '+GST' information if applicable.
|
|
|
Display the correct discount information if applicable.
|
|
|
If 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.
|