Components/Object List
fd-object-list · 5 examples from SAP's documentation · Back to the gallery
About
An object list is a type of list that consists of object list items, where each item provides a quick overview of an object. Object list items should only contain essential information for the user to identify what objects to prioritize. Avoid long descriptive texts as the text space is limited and will truncate. **Object list items can display the following elements:**
**Use the object list if:** - You want to display brief details to the user. **Do not use the object list if:** - You want to display detailed information to the user. - You want to trigger more than one event, as each object list item should contain one link. **Object list consists of the following elements:** - \ **Use the object list if:** - You want to display brief details to the user. - You want to display detailed information to the user. - You want to trigger more than one event, as each object list item should contain one link. **Object list consists of the following elements:** - \
Standard
The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.
Object List Item
-
Optional inline text very very very long
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
457.00 EuroFirst AttributeSecond AttributeCritical very very very longThird Attribute -
Optional inline text very very very long
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
956.00 EuroFirst AttributeNegativeSecond AttributeNegativeThird Attribute -
Optional inline text very very very long
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
956.00 EuroWarningCritical -
Optional inline text very very very long
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
457.00 EuroFirst AttributeDraftSecond AttributeThird Attribute
Navigation
An object list can display links that the users can navigate to. To display a navigation object list, add the `fd-list--navigation-object` modifier class together with `fd-list--navigation` and the `fd-list__item--link` modifier class to the list elements that contain a link. All items should be navigable.
Object List Item With Navigation
Selection
Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element.
Object List Item With Row Selection
-
Optional inline text
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
457.00 EuroFirst AttributeSecond AttributeAvaliableThird AttributeOptional inline textFitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
666.00 EuroFirst AttributeNegativeSecond AttributeInformativeThird Attribute
SelectionWithNavigation
This object list is both selectable and navigable. To display selectable object list items with navigation, add the `fd-list--selection`, `fd-list--navigation` and `fd-list--navigation-object` modifier classes to the list and the `fd-list__item--link` modifier class to the list elements that contain links. All items should be navigable.
Object List Item With Row Selection And Navigation
Borderless
Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.
Borderless Object List Item
-
Optional inline text very very very long
Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
457.00 EuroFirst AttributeSecond AttributePositive very very very longThird AttributeOptional inline text very very very longFitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
956.00 EuroFirst AttributeNegativeSecond AttributeCriticalThird AttributeOptional inline text very very very longFitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
956.00 EuroFirst AttributeWarningSecond AttributeCriticalThird Attribute