Divider

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

Title

Subtitle

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

<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

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

Hooks

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

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@divider-color	`@skin-gray-400`
@divider-opacity	`10`
@divider-size	`1px`
@divider-transparent-border-color	`fade(@skin-black, @divider-opacity)`