Divider

A component to divide / separate between elements like sections, menu items etc.

Title

Subtitle

Markup

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

<h1 pam-typography="headline">Title</h1>
    <div pam-Divider></div>
<h2 pam-typography="subheader">Subtitle</h2>

Inset

pam-Divider="inset" Creates a horizontal divider with a inset value to be used with list items etc.

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">
            <h3 pam-typography="subheader">Item content</h3>
        </div>
    </div>
    <div pam-Divider="inset">
</div>

Transparent

pam-Divider="transparent" Creates a horizontal divider with a transparent color.

Markup

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

<div pam-Divider="transparent"></div>

Hooks

.hook-divider .hook-divider-inset .hook-divider-transparent