CSS only

List

Vertical lists of items. SCSS-only: a ng-list of ng-list-item rows, each with media, content and actions.

An item holds an optional ng-list-media (icon/avatar), a ng-list-content (ng-list-title + ng-list-text) and an optional ng-list-action. Modifiers control borders, dividers and interaction.

Basic

bordered + divided give a framed, separated list.

Inbox

12 new messages
Drafts

3 saved

list.html

<ul class="ng-list bordered divided">
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Inbox</div>
            <div class="ng-list-text">12 new messages</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Drafts</div>
            <div class="ng-list-text">3 saved</div>
        </div>
    </li>
</ul>

Media & actions

Add ng-list-media and ng-list-action; hover highlights rows.

Jane Doe

jane@example.com
Mark Roe

mark@example.com

list.html

<ul class="ng-list bordered divided hover">
    <li class="ng-list-item">
        <span class="ng-list-media"><i class="ph ph-user-circle fs-2xl"></i></span>
        <div class="ng-list-content">
            <div class="ng-list-title">Jane Doe</div>
            <div class="ng-list-text">jane@example.com</div>
        </div>
        <div class="ng-list-action">
            <button type="button" class="ng-btn ng-btn-mute-ghost circle" aria-label="More"><i class="ph ph-dots-three"></i></button>
        </div>
    </li>
    <li class="ng-list-item">
        <span class="ng-list-media"><i class="ph ph-user-circle fs-2xl"></i></span>
        <div class="ng-list-content">
            <div class="ng-list-title">Mark Roe</div>
            <div class="ng-list-text">mark@example.com</div>
        </div>
        <div class="ng-list-action">
            <button type="button" class="ng-btn ng-btn-mute-ghost circle" aria-label="More"><i class="ph ph-dots-three"></i></button>
        </div>
    </li>
</ul>

Striped

striped shades alternate rows.

Mercury

Closest to the Sun
Venus

Second planet
Earth

Our home
Mars

The red planet

list.html

<ul class="ng-list striped">
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Mercury</div>
            <div class="ng-list-text">Closest to the Sun</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Venus</div>
            <div class="ng-list-text">Second planet</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Earth</div>
            <div class="ng-list-text">Our home</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Mars</div>
            <div class="ng-list-text">The red planet</div>
        </div>
    </li>
</ul>

Compact

compact tightens the row padding.

Mercury

Closest to the Sun
Venus

Second planet
Earth

Our home
Mars

The red planet

list.html

<ul class="ng-list bordered divided compact">
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Mercury</div>
            <div class="ng-list-text">Closest to the Sun</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Venus</div>
            <div class="ng-list-text">Second planet</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Earth</div>
            <div class="ng-list-text">Our home</div>
        </div>
    </li>
    <li class="ng-list-item">
        <div class="ng-list-content">
            <div class="ng-list-title">Mars</div>
            <div class="ng-list-text">The red planet</div>
        </div>
    </li>
</ul>

Selectable

selectable + is-active mark a chosen row.

Overview
Billing
Members

list.html

<ul class="ng-list bordered divided selectable hover">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Overview</div></div></li>
    <li class="ng-list-item is-active"><div class="ng-list-content"><div class="ng-list-title">Billing</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Members</div></div></li>
</ul>

Horizontal

horizontal lays items in a row — handy for stat strips.

Posts
128
Followers
4.2k
Following
312

list.html

<ul class="ng-list horizontal divided">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Posts</div><div class="ng-list-text">128</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Followers</div><div class="ng-list-text">4.2k</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Following</div><div class="ng-list-text">312</div></div></li>
</ul>

Anatomy

ng-list ng-list-item ng-list-media ng-list-content ng-list-title ng-list-text ng-list-action

Modifiers

bordered divided flush compact hover clickable selectable striped horizontal tasks

Reference

Generated from the component source (_ng_list.scss).

Component info

Name	`List`
Type	`css`
Version	`1.1.0`
Status	`css`
CSS	`/assets/css/components/_ng_list.scss`

Classes

.ng-list .ng-list-action .ng-list-content .ng-list-item .ng-list-media .ng-list-meta-content .ng-list-text .ng-list-title .ng-meta-body .ng-meta-end .ng-meta-item .ng-meta-start .ng-meta-text .ng-meta-title .ng-task-action .ng-task-check .ng-task-content .ng-task-meta .ng-task-title

Tokens

--ng-list-bg --ng-list-border-color --ng-list-border-width --ng-list-color --ng-list-hover-bg --ng-list-item-gap --ng-list-item-padding --ng-list-item-padding-x --ng-list-item-padding-y --ng-list-selected-bg --ng-list-striped-bg --ng-task-border-color --ng-task-border-width --ng-task-checkbox-gap