Components/Feed List and Item

The feed list displays feed list items that individually consist of a username, a written entry and an optional image. There is also a separate byline below that can contain a time stamp or an attribute in the form of free text.

**Use the feed list if:** - You expect multiple instances, such as notes or feed entries. - The items in the feed list are homogenous. - A user needs to input small amounts of text without formatting. **Do not use feed list if:** - The user needs to format the text (rich text editor). - You need only a single text box instance. Instead, use **Text Area**. - You want to display empty fields for the user to input feed entries. Instead, use **Feed Input**. **Use the feed list if:** - You expect multiple instances, such as notes or feed entries. - The items in the feed list are homogenous. - A user needs to input small amounts of text without formatting. - The user needs to format the text (rich text editor). - You need only a single text box instance. Instead, use **Text Area**. - You want to display empty fields for the user to input feed entries. Instead, use **Feed Input**.

The standard feed list item displays a user\

The feed list item will display a placeholder image if the user does not have an image assigned.

The feed list item can be displayed without an image by removing the `fd-avatar` element from the container.

The feed list item can display linked usernames (and images). To display a linked username, add the `fd-link` class with the `fd-link--emphasized` modifier to the `fd-feed-list__name` element.

Feed list items can display a MORE link that can show more text (when/if it is truncated). Truncation occurs when the text reaches 300 characters. When hovering over the link, the text is highlighted and underlined.

Similarly, feed list items can display a LESS link that will revert the text back to when it was truncated.

Feed list items can display actions that users can perform on their individual feed posts. These typically include actions like Edit and Delete, however, other actions can be displayed depending on the use case. It is recommended to display a maximum of 5 actions per post.

Evidently, feed list items can be displayed in a group. The example below displays a feed list item with a placeholder image and two standard feed list items.

When feed list items are displayed in a group, they are usually separated by borders. However, to remove the borders, add the `fd-feed-list--no-border` modifier class to the main element.

The feed list item can be mobile responsive by adding the `fd-feed-list--s` modifier class to the main element.