List Item

Display rows of similar content inside a list. List Item components commonly appear inside Dropdown and SideDrawer components.

Basic structure

The only requirement is a series of <li class="ListItem"> elements wrapped in a <ul class="ListItemGroup">. Inside each <li>, you can add any layouts and components you like.

Colm Tuite
Colm Tuite

<ul class="ListItemGroup">
    <li class="ListItem">
        <div class="display-flex ai-center jc-spaceBetween width-100">
            <span class="fs-4">Colm Tuite</span>
            <button class="Button primary" type="button">Add friend</button>
        </div>
    </li>
    <li class="ListItem">
        <div class="display-flex ai-center jc-spaceBetween width-100">
            <span class="fs-4">Colm Tuite</span>
            <button class="Button primary" type="button">Add friend</button>
        </div>
    </li>
</ul>

Interactive list items

Often, you will need a clickable List Item. You can do this by adding an <a> inside the <li> and moving the .ListItem class to the <a> instead. Add an additional interactive class to apply hover and active effects.

Don't put interactive components inside an interactive List Item.

<ul class="ListItemGroup">
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
</ul>

Again, you can add almost any layouts or components necessary inside but don't add interactive components inside an interactive List Item. Here is an example with a Badge component.

<ul class="ListItemGroup">
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
</ul>

Selected

Often, you will need a clickable List Item. You can do this by adding an

<ul class="ListItemGroup">
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
</ul>

Large

Often, you will need a clickable List Item. You can do this by adding an

<ul class="ListItemGroup">
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
    <li>
        <a class="ListItem interactive" href="#">
            <span class="fs-4">Colm Tuite</span>
        </a>
    </li>
</ul>