Pricing component

Overview

The pricing component including product price and features. It can be used to show different products.

Examples

Default variation

Plans starting from

$12 .00

monthly + PAYG Payroll

~~was $24.00~~

View plans & pricing

<section class="pricing-component">
<main class="pricing-component__main-content">
<header class="pricing-component__header">
<h2 class="pricing-component__header-title">Discover a new way to do the books with MYOB Business accounting software</h2>
<a href="#" class="pricing-component__header-link">Find out more about MYOB Business</a>
</header>
<div class="pricing-component__product-details">
<p>Plans starting from</p>
<div class="pricing-component__price">
<span class="pricing-component__price--dollar">$</span>12
<span class="pricing-component__price--decimal">.00</span>
</div>
<p>monthly + PAYG Payroll</p>
<p>
<del class="pricing-component__discount">was $24.00</del>
</p>
<div class="btn-group">
<a class="btn btn--mono" href="https://myob.com.au/trial/au/accounting-with-payroll?pc=ONLINEONLY50PCTOFF" >View plans & pricing</a>
</div>
</div>
<svg class="pricing-component__background-image" width="524" height="524" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#a)">
<circle cx="262" cy="262" r="142" fill="#EC0677"/>
</g>
<defs>
<filter id="a" x="0" y="0" width="524" height="524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur"/>
</filter>
</defs>
</svg>
</main>
<aside class="pricing-component__aside">
<ul class="pricing-component__aside-list">
<li>
<div class="feature">
<div class="feature__icon icon icon--md icon--fg-white">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Cancel any time</title>
<path d="M6.5 3h4.245l.803 1.712c.083.176.259.288.453.288H17.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-5.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H6.5c-.276 0-.5.224-.5.5s.224.5.5.5zm1-2h4.245l.803 1.712c.083.176.259.288.453.288H16.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3.182L12.515.288C12.432.112 12.256 0 12.062 0H7.5c-.276 0-.5.224-.5.5s.224.5.5.5zm16.494 15.469c-.002-.033-.011-.064-.02-.096-.009-.034-.017-.066-.033-.096-.004-.01-.004-.02-.009-.029l-3.5-6c-.09-.154-.254-.248-.432-.248h-1V6.5c0-.276-.224-.5-.5-.5h-7.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H5.5c-.276 0-.5.224-.5.5V10H4c-.178 0-.342.094-.432.248l-3.5 6c-.006.01-.005.02-.01.03-.015.029-.023.061-.032.094-.009.032-.018.064-.02.097 0 .011-.006.02-.006.031v7c0 .276.224.5.5.5h23c.276 0 .5-.224.5-.5v-7c0-.011-.006-.02-.006-.031zM23 23H1v-6h6v.5c0 1.379 1.622 2.5 3 2.5h4.5c1.379 0 2.5-1.121 2.5-2.5V17h6v6zM4.287 11H5v3.5c0 .276.224.5.5.5s.5-.224.5-.5V5h3.745l.803 1.712c.083.176.259.288.453.288H18v7.5c0 .276.224.5.5.5s.5-.224.5-.5V11h.713l2.917 5H16.5c-.276 0-.5.224-.5.5v1c0 .827-.673 1.5-1.5 1.5H10c-.827 0-2-.673-2-1.5v-1c0-.276.276-.5 0-.5H1.371l2.916-5zM9.5 15h6.027c.276 0 .5-.224.5-.5 0-1.421-.556-2.414-1.692-3.017.243-.36.38-.79.38-1.235 0-1.213-.988-2.2-2.2-2.2-1.214 0-2.2.988-2.2 2.2 0 .448.133.876.377 1.235C9.555 12.085 9 13.078 9 14.5c0 .276.223.5.5.5zm2.22-2.87c.18-.061.31-.218.335-.406.026-.19-.057-.375-.215-.482-.329-.223-.526-.594-.526-.993 0-.661.538-1.2 1.2-1.2.662 0 1.2.538 1.2 1.199 0 .398-.198.77-.528.995-.157.107-.239.293-.214.48.026.189.157.346.336.407 1.05.353 1.566.91 1.69 1.87H10.03c.123-.96.638-1.518 1.69-1.87z" fill="#000" fill-rule="evenodd"/>
</svg>
</div>
<div class="feature__copy">
Cancel any time
</div>
</div>
</li>
<li>
<div class="feature">
<div class="feature__icon icon icon--md icon--fg-white">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Get support 7 days a week</title>
<path d="M6.5 3h4.245l.803 1.712c.083.176.259.288.453.288H17.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-5.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H6.5c-.276 0-.5.224-.5.5s.224.5.5.5zm1-2h4.245l.803 1.712c.083.176.259.288.453.288H16.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3.182L12.515.288C12.432.112 12.256 0 12.062 0H7.5c-.276 0-.5.224-.5.5s.224.5.5.5zm16.494 15.469c-.002-.033-.011-.064-.02-.096-.009-.034-.017-.066-.033-.096-.004-.01-.004-.02-.009-.029l-3.5-6c-.09-.154-.254-.248-.432-.248h-1V6.5c0-.276-.224-.5-.5-.5h-7.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H5.5c-.276 0-.5.224-.5.5V10H4c-.178 0-.342.094-.432.248l-3.5 6c-.006.01-.005.02-.01.03-.015.029-.023.061-.032.094-.009.032-.018.064-.02.097 0 .011-.006.02-.006.031v7c0 .276.224.5.5.5h23c.276 0 .5-.224.5-.5v-7c0-.011-.006-.02-.006-.031zM23 23H1v-6h6v.5c0 1.379 1.622 2.5 3 2.5h4.5c1.379 0 2.5-1.121 2.5-2.5V17h6v6zM4.287 11H5v3.5c0 .276.224.5.5.5s.5-.224.5-.5V5h3.745l.803 1.712c.083.176.259.288.453.288H18v7.5c0 .276.224.5.5.5s.5-.224.5-.5V11h.713l2.917 5H16.5c-.276 0-.5.224-.5.5v1c0 .827-.673 1.5-1.5 1.5H10c-.827 0-2-.673-2-1.5v-1c0-.276.276-.5 0-.5H1.371l2.916-5zM9.5 15h6.027c.276 0 .5-.224.5-.5 0-1.421-.556-2.414-1.692-3.017.243-.36.38-.79.38-1.235 0-1.213-.988-2.2-2.2-2.2-1.214 0-2.2.988-2.2 2.2 0 .448.133.876.377 1.235C9.555 12.085 9 13.078 9 14.5c0 .276.223.5.5.5zm2.22-2.87c.18-.061.31-.218.335-.406.026-.19-.057-.375-.215-.482-.329-.223-.526-.594-.526-.993 0-.661.538-1.2 1.2-1.2.662 0 1.2.538 1.2 1.199 0 .398-.198.77-.528.995-.157.107-.239.293-.214.48.026.189.157.346.336.407 1.05.353 1.566.91 1.69 1.87H10.03c.123-.96.638-1.518 1.69-1.87z" fill="#000" fill-rule="evenodd"/>
</svg>
</div>
<div class="feature__copy">
Get support 7 days a week
</div>
</div>
</li>
<li>
<div class="feature">
<div class="feature__icon icon icon--md icon--fg-white">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Use on any device or browser</title>
<path d="M6.5 3h4.245l.803 1.712c.083.176.259.288.453.288H17.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-5.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H6.5c-.276 0-.5.224-.5.5s.224.5.5.5zm1-2h4.245l.803 1.712c.083.176.259.288.453.288H16.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3.182L12.515.288C12.432.112 12.256 0 12.062 0H7.5c-.276 0-.5.224-.5.5s.224.5.5.5zm16.494 15.469c-.002-.033-.011-.064-.02-.096-.009-.034-.017-.066-.033-.096-.004-.01-.004-.02-.009-.029l-3.5-6c-.09-.154-.254-.248-.432-.248h-1V6.5c0-.276-.224-.5-.5-.5h-7.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H5.5c-.276 0-.5.224-.5.5V10H4c-.178 0-.342.094-.432.248l-3.5 6c-.006.01-.005.02-.01.03-.015.029-.023.061-.032.094-.009.032-.018.064-.02.097 0 .011-.006.02-.006.031v7c0 .276.224.5.5.5h23c.276 0 .5-.224.5-.5v-7c0-.011-.006-.02-.006-.031zM23 23H1v-6h6v.5c0 1.379 1.622 2.5 3 2.5h4.5c1.379 0 2.5-1.121 2.5-2.5V17h6v6zM4.287 11H5v3.5c0 .276.224.5.5.5s.5-.224.5-.5V5h3.745l.803 1.712c.083.176.259.288.453.288H18v7.5c0 .276.224.5.5.5s.5-.224.5-.5V11h.713l2.917 5H16.5c-.276 0-.5.224-.5.5v1c0 .827-.673 1.5-1.5 1.5H10c-.827 0-2-.673-2-1.5v-1c0-.276.276-.5 0-.5H1.371l2.916-5zM9.5 15h6.027c.276 0 .5-.224.5-.5 0-1.421-.556-2.414-1.692-3.017.243-.36.38-.79.38-1.235 0-1.213-.988-2.2-2.2-2.2-1.214 0-2.2.988-2.2 2.2 0 .448.133.876.377 1.235C9.555 12.085 9 13.078 9 14.5c0 .276.223.5.5.5zm2.22-2.87c.18-.061.31-.218.335-.406.026-.19-.057-.375-.215-.482-.329-.223-.526-.594-.526-.993 0-.661.538-1.2 1.2-1.2.662 0 1.2.538 1.2 1.199 0 .398-.198.77-.528.995-.157.107-.239.293-.214.48.026.189.157.346.336.407 1.05.353 1.566.91 1.69 1.87H10.03c.123-.96.638-1.518 1.69-1.87z" fill="#000" fill-rule="evenodd"/>
</svg>
</div>
<div class="feature__copy">
Use on any device or browser
</div>
</li>
</ul>
</aside>
</section>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to @marquee on the #astridd Slack channel.

Implementation guidelines

We're so sorry, there are currently no implementation guidelines for this component 😥

If you feel you can help out your fellow designers by creating implementation guidelines for this component, please reach out to @marquee on the #astridd Slack channel.