Lists

Lists are groups of text or image elements. Composed of primary and optional actions represented by icons and text.

One line

Single-line list items contain a maximum of one line of text.

  • List Item
  • List Item
  • List Item
Markup

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

<ul pam-List pam-border="w:px">
    <li pam-List-Item>List Item</li>
    <li pam-List-Item>List Item</li>
    <li pam-List-Item>List Item</li>
</ul>

Two line

Two-line list items contain a maximum of two line of text.

  • Line Item Secondary text
  • Line Item Secondary text
  • Line Item Secondary text
Markup

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

<ul pam-List="2-line" pam-border="w:px">
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
        </span>
    </li>
</ul>

Three line

Three-line list items contain a maximum of three line of text.

  • Line Item Secondary text Tertiary text
  • Line Item Secondary text Tertiary text
  • Line Item Secondary text Tertiary text
Markup

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

<ul pam-List="3-line" pam-border="w:px">
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
            <span pam-List-Item-Text-Secondary>Tertiary text</span>
        </span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
            <span pam-List-Item-Text-Secondary>Tertiary text</span>
        </span>
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Text>
            <span pam-List-Item-Text-Primary>Line Item</span>
            <span pam-List-Item-Text-Secondary>Secondary text</span>
            <span pam-List-Item-Text-Secondary>Tertiary text</span>
        </span>
    </li>
</ul>

Leading Icon

Use pam-List-Item-Primary to add a leading icon.

  • cast List Item
  • wifi List Item
  • sync List Item
Markup

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

<ul pam-List pam-border="w:px">
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">cast</span>
        List Item
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">wifi</span>
        List Item
    </li>
    <li pam-List-Item>
        <span pam-List-Item-Primary class="material-icons">sync</span>
        List Item
    </li>
</ul>

Trailing Icon

Use pam-List-Item-Secondary to add a trailing icon.

  • List Item help
  • List Item help
  • List Item help
Markup

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

<ul pam-List pam-border="w:px">
    <li pam-List-Item>
        List Item
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
    <li pam-List-Item>
        List Item
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
    <li pam-List-Item>
        List Item
        <span pam-List-Item-Secondary class="material-icons">help</span>
    </li>
</ul>

Two Line with Icons

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

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

Toggle full screen Open in new window Toggle example guides Toggle HTML 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>
    <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>

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 full screen Open in new window 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>

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

Toggle full screen Open in new window Toggle example guides Toggle HTML 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>

Hooks

.hook-list

Variables

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

Name Value
@list-padding @space-8 0
@list-color @skin-text-primary-on-background
@list-color-secondary @skin-text-hint-on-background
@list-two-line-height @space-72
@list-three-line-height @space-96
@list-avatar-bg-color @list-color-secondary
@list-avatar-border-radius @border-radius-rounded
@list-avatar-color @skin-white
@list-avatar-height @space-40
@list-avatar-margin 0 @space-16 0 0
@list-avatar-width @space-40
@list-item-align center
@list-item-cursor pointer
@list-item-display flex
@list-item-height @space-48
@list-item-justify-content flex-start
@list-item-outline 0
@list-item-padding @space-0 @space-16
@list-item-position relative
@list-item-text-line-heigth @line-height-secondary
@list-item-primary-align center
@list-item-primary-color @list-color-secondary
@list-item-primary-display inline-flex
@list-item-primary-fill currentColor
@list-item-primary-flex-shrink 0
@list-item-primary-height @space-24
@list-item-primary-justify-content center
@list-item-primary-margin 0 @space-32 0 0
@list-item-primary-width @space-24
@list-item-text-primary-display block
@list-item-text-secondary-color @list-color-secondary
@list-item-text-secondary-display block
@list-item-text-secondary-font-size @font-size-medium
@list-item-secondary-color @list-color-secondary