Tier Header

Open in Figma View all renders

Unselected tier header

Tier headers in unselected state for tier 1, tier 2, and tier 3. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__header" data-tier="1">
        Tier title
    </div>

    <div class="tier__header" data-tier="2">
        Tier title
    </div>

    <div class="tier__header" data-tier="3">
        Tier title
    </div>
</div>

Selected tier header

Tier headers in selected state for tier 1, tier 2, and tier 3. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__header tier__header--selected" data-tier="1">
        Tier title
    </div>

    <div class="tier__header tier__header--selected" data-tier="2">
        Tier title
    </div>

    <div class="tier__header tier__header--selected" data-tier="3">
        Tier title
    </div>
</div>