Tier Action

Open in Figma View all renders

Unselected monthly payment

Displays monthly payment options in an unselected state, allowing users to review. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__action" data-tier="1">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action" data-tier="2">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action" data-tier="3">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>
</div>

Unselected annual payment

Displays annual payment options in an unselected state, allowing users to review. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__action" data-tier="1">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action" data-tier="2">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action" data-tier="3">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
            Select
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>
</div>

Selected monthly payment

Shows monthly payment options in a selected state, indicating the active tier. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__action tier__action--selected" data-tier="1">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action tier__action--selected" data-tier="2">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action tier__action--selected" data-tier="3">
        <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>
        <p class="copy copy--small">Total amount payable £660.84</p>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>
</div>

Selected annual payment

Shows annual payment options in a selected state, indicating the active tier. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__action tier__action--selected" data-tier="1">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action tier__action--selected" data-tier="2">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>

    <div class="tier__action tier__action--selected" data-tier="3">
        <div class="tier-pricing">
            <h3 class="heading heading--bold">£280.10</h3>
            <p class="heading">/ year</p>
        </div>
        <label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
            <input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox" checked>
            Selected
            <span class="material-symbols-rounded" aria-hidden="true">check</span>
        </label>
    </div>
</div>