List

In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs.

Standard List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Compact Size

  • List item 1
  • List item 2
  • List item 3
  • List item 4 
<ul class="fd-list" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>

<br />
<h4>Compact Size</h4>
<ul class="fd-list fd-list--compact" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>

Standard List With Navigation

For a standard list with navigation links add the fd-list--navigation modifier class to the list and the fd-list__item--link modifier class to the list elements that contain links. All items should be navigable.

<ul class="fd-list fd-list--navigation" role="list">
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
        <span class="fd-list__title">List item 1</span>
      </a>
  </li>
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
        <span class="fd-list__icon sap-icon--history"></span>
        <span class="fd-list__title">List item 2</span>
      </a>
  </li>
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
        <span class="fd-list__title">List item 3</span>
        <span class="fd-list__icon sap-icon--map"></span>
      </a>
  </li>
</ul>

Standard List With Navigation Indication

If only a subset of the list items are navigable you should indicate those by displaying a navigation arrow. This is achieved by applying the fd-list--navigation-indication modifier class to the ul element. Do not show arrows if all items are navigable. In this case use a Standard List with Navigation.

<ul class="fd-list fd-list--navigation fd-list--navigation-indication" role="list">
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
        <span class="fd-list__title">List item 1</span>
      </a>
  </li>
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-selected" href="#">
        <span class="fd-list__icon sap-icon--history"></span>
        <span class="fd-list__title">List item 2</span>
      </a>
  </li>
  <li tabindex="0" role="listitem" class="fd-list__item">
        <span class="fd-list__icon sap-icon--history"></span>
        <span class="fd-list__title">List item 3</span>
  </li>
  <li tabindex="0" role="listitem" class="fd-list__item">
        <span class="fd-list__title">List item 4</span>
        <span class="fd-list__icon sap-icon--map"></span>
  </li>
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
      <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator is-navigated" href="#">
        <span class="fd-list__title">List item 5</span>
        <span class="fd-list__icon sap-icon--map"></span>
      </a>
  </li>
</ul>

Standard List with Action List Item


Compact Size


Action List Item With Other List Items

  • List Item 1
  • List Item 2
  • List Item 3 
<ul class="fd-list" role="list">
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">Forward</button>
  </li>
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">Save</button>
  </li>
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">More Options</button>
  </li>
</ul>

<br />
<h4>Compact Size</h4>
<ul class="fd-list fd-list--compact" role="list">
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">Forward</button>
  </li>
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">Save</button>
  </li>
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">More Options</button>
  </li>
</ul>

<br />
<h4>Action List Item With Other List Items </h4>
<ul class="fd-list" role="list">
  <li role="listitem" class="fd-list__item">
      <span class="fd-list__title">List Item 1</span>
  </li>
  <li role="listitem" class="fd-list__item">
      <span class="fd-list__title">List Item 2</span>
  </li>
  <li role="listitem" class="fd-list__item">
      <span class="fd-list__title">List Item 3</span>
  </li>
  <li role="listitem" class="fd-list__item fd-list__item--action">
      <button class="fd-list__title">More Options</button>
  </li>
</ul>

Secondary Data

  • List item 1 A1
  • List item 2 A2
  • List item 3 A3
  • List item 4 A4 
<ul class="fd-list" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
      <span class="fd-list__secondary">A1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
      <span class="fd-list__secondary">A2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
      <span class="fd-list__secondary">A3</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
      <span class="fd-list__secondary">A4</span>
  </li>
</ul>

Icons

  • List item 1
  • List item 2
  • List item 3
  • List item 4 
<ul class="fd-list" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__icon sap-icon--cart"></span>
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__icon sap-icon--wrench"></span>
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
      <span class="fd-list__icon sap-icon--lightbulb"></span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
      <span class="fd-list__icon sap-icon--history"></span>
  </li>
</ul>

Group Header

  • Group Header 1
  • List item 1
  • List item 2
  • List item 3
  • Group Header 2
  • List item 4
  • List item 5
  • List item 6 
<ul class="fd-list" role="list">
  <li role="listitem" class="fd-list__group-header">
    Group Header 1
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li role="listitem" class="fd-list__group-header">
    Group Header 2
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 5</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 6</span>
  </li>
</ul>
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • Footer text 
<ul class="fd-list" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
  <li role="listitem" class="fd-list__footer">
    Footer text
  </li>
</ul>

Borderless

  • List item 1
  • List item 2
  • List item 3
  • List item 4 
<ul class="fd-list fd-list--no-border" role="list">
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li role="listitem" tabindex="0" class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>