Feed list is a regular bullet list with a custom style, where each item has a small bullet and item connector. It can be easily extended to support children elements, multiple lines, images, icons, action buttons etc. The most common use case for this list style is notifications or activity feed. It supports 3 different shapes (circle, square and rhombus) and 2 styles (empty and filled).

You can change default bullet and connector color with our border color utility classes. You can apply custom border color to the whole list by adding the same color class to all items, or change border color in each item separately. To change colors, simply add .border-[color] to .list-feed-item element. This option is supported by all bullet shapes and styles.

In these examples we added time and date stamp to each item in different alignment options. Date and time stamps can be displayed before the bullet and connector, sticked to the right edge of the container, displayed above or below the item text. In case of left aligned stamps, .list-feed-time class is required in the list item element.

A few more examples of how the feed list is displayed with inline elements. Here we show a simple list of actionable icons and a list with dropdown menu. Icons and dropdown menus can be also displayed in the feed item itself. For better alignment, add .d-flex.flex-nowrap classes to each .list-feed-item element.