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">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li 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">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>

Secondary Data

  • List item 1 Positive
  • List item 2 Negative
  • List item 3 Positive
  • List item 4 Negative 
<ul class="fd-list">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
      <span class="fd-list__secondary fd-has-color-status-1">Positive</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
      <span class="fd-list__secondary fd-has-color-status-3">Negative</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
      <span class="fd-list__secondary fd-has-color-status-1">Positive</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
      <span class="fd-list__secondary fd-has-color-status-3">Negative</span>
  </li>
</ul>

Icons

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


  • List item 1
  • List item 2
  • List item 3 
<ul class="fd-list">
  <li class="fd-list__item">
      <span class="fd-list__icon sap-icon--cart"></span>
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__icon sap-icon--wrench"></span>
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__icon sap-icon--lightbulb"></span>
      <span class="fd-list__title">List item 3</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__icon sap-icon--history"></span>
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>
<br /><br />
<ul class="fd-list">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
      <span class="fd-list__icon sap-icon--navigation-right-arrow"></span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
      <span class="fd-list__icon sap-icon--navigation-right-arrow"></span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
      <span class="fd-list__icon sap-icon--navigation-right-arrow"></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">
  <li class="fd-list__group-header">
    Group Header 1
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li class="fd-list__group-header">
    Group Header 2
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 5</span>
  </li>
  <li 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">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
  <li 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">
  <li class="fd-list__item">
      <span class="fd-list__title">List item 1</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 2</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 3</span>
  </li>
  <li class="fd-list__item">
      <span class="fd-list__title">List item 4</span>
  </li>
</ul>