Two Line with Avatar

Use pam-List="avatar" to change the apperance of the leading icon to an avatar.

  • event Line Item Secondary text help
  • event Line Item Secondary text help
  • event Line Item Secondary text help
Markup

Toggle example guides Toggle HTML markup 

<ul pam-List="2-line avatar" 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>
    <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>