Responsiveness & Adaptiveness
When the width of the available space falls below 25 rem (e.g. portrait mode on smartphones), the feed list item responds as follows.
The user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.
The feed list item consists of the user’s name and an optional picture of the user who wrote the note/ update (optional). The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below is separate byline that can hold a time stamp and an attribute in the form of free text. This allows apps to put in their own attribute (e.g. approval etc.). Both time stamp and attribute are optional.
In case the name is a link, the picture should also be linked with the same attributes.
Behavior & Interaction
Show More Text
When the text exceeds a certain amount of characters (default value can be overwritten by apps), the rest of the text is truncated and a More link appears after the truncated section.
Initially the More link is grey, so it does not divert attention from the actual text.
When the user moves the mouse over the feed chunk, the More link is highlighted.
Hovering over the link underlines it.
Show Less Text
Use the feed list item if…
… you need to show unformatted text with a user’s name in front, e.g. for a feed control or notes control.
Do not use the feed list item if…
… you need to display formatted text.
… you need to display large amounts of text.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.