Components/List/Byline

fd-list · 13 examples from SAP's documentation · Back to the gallery

About

Byline lists allow users to extend standard list items with additional content. To display a byline list, add the \

Default

The default byline list dislays list items in the standard size, which is ideal for mobile. To display the byline list in compact mode (for desktop), add the \

Standard size

  • List Item Title
    Byline (description)
  • List item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • List item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • Text-only list item
    Byline (description)

Attachment

The Attachment List shares the same specification as the Standard List with Byline. The only difference is that if two text items are set within the Byline row, the text aligned to the right is always standard text (i.e. not semantic text)

Standard size

  • Title
    Byline (description)
  • List item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (standard text)

Selection with navigation

Byline list items can contain navigation links. To add navigation, add the \

Buttons

  • List item 1

Interractive

The \

  • Title
    Byline
  • Hover State
    Byline
  • Active State
    Byline
  • Selected State
    Byline
  • Selected and Hover States
    Byline
  • Focus States
    Byline
  • Selected and Focus States
    Byline

Navigation indicators

If only some of the list items are navigable, you should indicate them with an arrow icon. To display navigation indicators, add the \

Borderless

To display a borderless byline list, add the \

  • Title
    Byline (description)
  • list item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (positive)
  • List item with 2-column byline (with an additional semantic byline)
    First text item in byline (standard text)
    Second text item in byline (information)

Selection

Byline list items can display checkboxes that users can select from. To display byline list items with selection, add the \

  • Title Byline (description)
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • Text-only list item
    Byline (description)

Selection with navigation

To display byline list items with selection and navigation, add these following modifier classes to the main element: - \

Byline List with Counter

  • List Item Title
    Byline (description)
    123
  • List item with no byline
    456
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
    12345
  • Text-only list item
    Byline (description)
    67890

List with long Title and Byline

By default, To allow the title and byline text to wrap, add these following modifier classes to the the title and byline respectively: - \

  • List Item Title
    Very Long Byline (description), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... More
    12345
  • Very long list item with no byline, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Very long title, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Less
    Second text item in byline (can be semantic)
  • Text-only list item
    Byline (description)

With Group Header

Standard size

  • Group header 1
  • List Item Title
    Byline (description)
  • List item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • Group header 2
  • List item with no byline
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • Text-only list item
    Byline (description)

UnreadNotification

non-fiori 3

Standard

  • Title Byline (description)
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • List item with 2-column byline
    First text item in byline (standard text)
    Second text item in byline (can be semantic)
  • Text-only list item
    Byline (description)

Navigation