Lists

pam-List wraps a pam-Item which in turn can contain up to three type of tiles pam-Tile="[left | content | right]".

One line

Use pam-Item to wrap one or more pam-Tiles and apply one row of content.

Item content

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<div pam-List>
    <div pam-Item>
        <div pam-Tile="left">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
        </div>
    </div>
</div>

Two line

Use pam-Item to wrap one or more pam-Tiles and apply two rows of content.

Item content

Item content

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<div pam-List>
    <div pam-Item>
        <div pam-Tile="left">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
            <p>Item content</p>
        </div>
    </div>
</div>

Three line

Use pam-Item to wrap one or more pam-Tiles. Add pam-Tile="top" to align the left tile and apply three rows of content.

Item content

Item content

Item content

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<div pam-List>
    <div pam-Item>
        <div pam-Tile="left top">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
            <p>Item content</p>
            <p>Item content</p>
        </div>
    </div>
</div>

Three parts

List item with right icon area: pam-Tile="right" adds a right icon area for a list item.

Item content

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<div pam-List>
    <div pam-Item>
        <div pam-Tile="left">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
        </div>
            <div pam-Tile="right">
            <div sg-mock-icon></div>
        </div>
    </div>
</div>

Divider

List items with dividers: Use pam-Item to wrap one or more pam-Tiles and apply a pam-Divider after each item.

Item content

Item content

Item content

Item content

Item content

Item content

Item content

Item content

Item content

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<div pam-List>
    <div pam-Item>
        <div pam-Tile="left top">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
            <p>Item content</p>
            <p>Item content</p>
        </div>
    </div>
    <div pam-Divider="inset"></div>
    <div pam-Item>
        <div pam-Tile="left top">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
            <p>Item content</p>
            <p>Item content</p>
        </div>
    </div>
    <div pam-Divider="inset"></div>
    <div pam-Item>
        <div pam-Tile="left top">
            <div sg-mock-icon></div>
        </div>
        <div pam-Tile="content">
            <h1 pam-typography="body-2">Item content</h1>
            <p>Item content</p>
            <p>Item content</p>
        </div>
    </div>
</div>

Hooks

.hook-item .hook-list .hook-tile .hook-tile-content .hook-tile-left .hook-tile-right .hook-tile-top