Tier Item

Open in Figma View all renders

Tier item

A default tier item representing a single benefit within a tier. 

<div class="tier" style="width: 360px">
    <div class="tier__item">
        <button class="btn btn--text">
            Benefit
        </button>
    </div>
</div>

Variations and modifiers

Striped tier item

A striped tier item representing a single benefit within a tier. 

<div class="tier" style="width: 360px">
    <div class="tier__item tier__item--striped">
        <button class="btn btn--text">
            Benefit
        </button>
    </div>
</div>

Tier item with copy

A tier item that includes additional contextual copy below the main benefit. 

<div class="tier" style="width: 360px">
    <div class="tier__item">
        <button class="btn btn--text">
            Benefit
        </button>
        <span class="copy copy--small">Contextual benefit copy</span>
    </div>
</div>

Striped tier item with copy

A striped tier item that includes additional contextual copy below the main benefit. 

<div class="tier" style="width: 360px">
    <div class="tier__item tier__item--striped">
        <button class="btn btn--text">
            Benefit
        </button>
        <span class="copy copy--small">Contextual benefit copy</span>
    </div>
</div>