Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Feed item

Feed item is a unit of social activity or timely information.It contains a distinguishing element (an avatar or an icon), heading, and content. Optionally it can include a secondary heading, metadata, and user actions.

This module has the following modifiers:

  • Compact: with tighter spacing, for use in smaller spaces such as Notifications pop over.
  • Indented: with left and right padding for use with coloured backgrounds, such unread notifications.
  • Alt: with grey background colour
  • Bordered: with a border at the bottom

Feed item in notifications

%li.m-feed-item.m-feed-item--bordered.m-feed-item--indented
  .m-feed-item__identifier
  .m-feed-item__body
    .m-feed-item__header
      .m-feed-item__preamble
        .m-feed-item__heading
          %a.m-feed-item__heading__primary
          %span.m-feed-item__heading__secondary
        %span.m-feed-item__context-heading
      .m-feed-item__meta
        %span.m-feed-item__timestamp.m-feed-item__timestamp--short
        %span.m-feed-item__timestamp.m-feed-item__timestamp--long
    .m-feed-item__content
      .m-feed-item__content__additions
        .a-avatar.a-avatar--small
        %a.m-feed-item__action-link

Feed item in comments

Feed

A group of feed items is displayed in a feed module with .m-feed. A feed can be nested inside another feed, for example in comments with replies.