Copied content to clipboard.

Default

Example

<div class="pb-list">
            <div class="pb-list_item">
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 2</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>
List item 1
List item 2
List item 3

With divider

Example

<div class="pb-list pb-list--divider">
            <div class="pb-list_item">
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 2</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>
List item 1
List item 2
List item 3

Dividers indented

Example

<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_account_circle"/>
</svg>
                <div class="pb-list_header">List item 2</div>
            </div>
            <hr class="pb-divider pb-divider--indent">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_account_circle"/>
</svg>
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>
List item 2
List item 3

With icons

Example

<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_image"/>
</svg>
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_movie"/>
</svg>
                <div class="pb-list_header">List item 2</div>
            </div>
        </div>
List item 1
List item 2

With icons and secondary actions

Example

<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_image"/>
</svg>
                <div class="pb-list_header">List item 1</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--dense
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_message"/>
</svg>
            </div>
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_movie"/>
</svg>
                <div class="pb-list_header">List item 2</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_delete"/>
</svg>
            </div>
        </div>
List item 1
List item 2