Lists

Link to Figma View all renders

Bullet list

<ul class="list">
    <li>Bullet list item one</li>
    <li>Bullet list item two</li>
    <li>Bullet list item three</li>
</ul>

Variations and modifiers

List Sizes

Lists can also be in small and large sizes. 

<ul class="list list--small">
    <li>Small bullet list item one</li>
    <li>Small bullet list item two</li>
    <li>Small bullet list item three</li>
</ul>
<ul class="list list--large">
    <li>Large bullet list item one</li>
    <li>Large bullet list item two</li>
    <li>Large bullet list item three</li>
</ul>

Icon list

Example of an icon list 

<ul class="list list--icon">
    <li><span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>Icon list item one</li>
    <li><span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>Icon list item two</li>
    <li><span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>Icon list item three</li>
</ul>

Tick list

Example of an tick icon list 

<ul class="list list--tick">
    <li>Tick list item one</li>
    <li>Tick list item two</li>
    <li>Tick list item three</li>
</ul>

Cross list

Example of a cross icon list 

<ul class="list list--cross">
    <li>Cross list item one</li>
    <li>Cross list item two</li>
    <li>Cross list item three</li>
</ul>