PAM

Two Line with Divider

Use pam-List-Item-Primary and pam-List-Item-Secondary to add leading and trailing icons and pam-Divider to add a divider.

event Line Item Secondary text help
event Line Item Secondary text help

event Line Item Secondary text help
event Line Item Secondary text help

Markup

<ul pam-List="2-line" pam-border="w:px">
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">event</span>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">event</span>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
    <div pam-divider></div>
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">event</span>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">event</span>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
</ul>