Tier Cell

Open in Figma View all renders

Tier cell

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

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__cell" data-tier="1">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell" data-tier="2">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell" data-tier="3">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>
</div>

Variations and modifiers

Selected tier cell

A tier cell with selected = true, contrast = false 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__cell tier__cell--selected" data-tier="1">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--selected" data-tier="2">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--selected" data-tier="3">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>
</div>

Striped tier cell

A tier cell with selected = true, contrast = false 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__cell tier__cell--striped" data-tier="1">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--striped" data-tier="2">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--striped" data-tier="3">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>
</div>

Selected striped tier cell

A tier cell with selected = true, contrast = true 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__cell tier__cell--selected tier__cell--striped" data-tier="1">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--selected tier__cell--striped" data-tier="2">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>

    <div class="tier__cell tier__cell--selected tier__cell--striped" data-tier="3">
        <span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
            check_circle
        </span>
    </div>
</div>

Tier cell with text

A tier cell with text content inside the cells. 

<div class="tier flex flex-wrap gap-m" style="width: 100%">
    <div class="tier__cell tier__cell--selected" data-tier="1">
        <p class="flex flex--column">
            <span class="copy copy--small copy--bold">At Home</span>
            <span class="copy copy--xsmall copy--bold">Added by you</span>
        </p>
    </div>

    <div class="tier__cell tier__cell--striped" data-tier="2">
        <span class="material-symbols-rounded material-symbols-rounded--error">
            close
        </span>
        <span class="copy copy--small copy--bold">
            30 days cover
        </span>
    </div>

    <div class="tier__cell tier__cell--selected tier__cell--striped" data-tier="3">
        <a href="#" class="copy copy--small copy--bold">Insurance Product Information Document</a>
    </div>
</div>