Tier Pricing

Open in Figma View all renders

Inline monthly payment

Displays a breakdown of the initial payment followed by monthly payments in a horizontal layout. 

<div class="tier">
    <div class="tier-pricing">
        <div class="tier-pricing__content">
            <h3 class="heading heading--bold">£56.03</h3>
            <p class="copy copy--small">today</p>
        </div>
        <div class="tier-pricing__bubble">
            <p class="copy copy--small">then</p>
        </div>
        <div class="tier-pricing__content">
            <h3 class="heading heading--bold">£23.24</h3>
            <p class="copy copy--small">x11 months</p>
        </div>
    </div>
</div>

Stacked monthly payment

Displays a breakdown of the initial payment followed by monthly payments in a vertical layout. 

<div class="tier">
    <div class="tier-pricing tier-pricing--stacked">
        <div class="tier-pricing__content">
           <h3 class="heading heading--bold">£56.03</h3>
           <p class="copy copy--small">today</p>
        </div>
        <div class="tier-pricing__bubble">
           <p class="copy copy--small">then</p>
        </div>
        <div class="tier-pricing__content">
           <h3 class="heading heading--bold">£23.24</h3>
           <p class="copy copy--small">x11 months</p>
        </div>
    </div>
</div>

Annual payment

Displays the total annual payment. 

<div class="tier">
    <div class="tier-pricing">
        <h3 class="heading heading--bold">£280.10</h3>
        <p class="heading">/ year</p>
    </div>
</div>