Base Post / Activity Stream

Posts are the base of all user comments. They use a common set of class names and styles are modified based on the container they are in.

The posts on this page are what commonly appear in an activity stream. Look at the "See Also" section at the bottom of this page for other variants.

Please see the Status Update / Bubble component for the status update code that sits at the top of an Activity Stream.

Basic

File/Image File (with comments)

Bookmark

Status (with optional delete button)

Repost

Older version of a post on a board

Classes:

  • lotusPost - put this on outermost article element (or div if not using html5).
  • lotusPostHover (new) - an additional class assigned along with lotusPost when the user is hovering over or focused on the article/div.
  • lotusPostSelected (new) - an additional class assigned along with lotusPost when the article/div is selected.
  • lotusPostAuthorInfo - this div wraps the all the author info (avatar, name, meta information).
  • lotusPostAvatar - this div wraps the author's photo.
  • lotusPostName - this appears on comments in a forum, along with meta information.
  • lotusPostContent - this class wraps the rest of the post information.
  • lotusPostAction (new) - the first line of the post content which shows what the post is about.
  • lotusPostDetails - this class is on the div that wraps the details of the post.
  • lotusPostObject (new) - this class is assigned to an image tag when there is an object included in the post.
  • lotusPostInlineActions (new) - this class is assigned to a div that presents user controls for performing actions inline in the post.
  • lotusActionBox (new) - this class is assigned to a div that presents a message and action links as opposed to a form in the lotusPostInlineActions div.
  • lotusActionMessage (new) - this class is assigned to a div inside a lotusActionBox that contains text.
  • lotusTitle - this class is assigned to an h4 tag when the post details include an object that has a title.
  • lotusMeta - used for meta information in a post.
  • lotusIcon - used for an icon to give it a margin and separate it from adjacent text.
  • lotusPostMore (new) - action links that appear when the user hovers over or focuses on a post.
  • lotusDelete - optional delete button class.
  • lotusPostIndicator (new) - used to indicate that the post has a flyout.
  • lotusTextCollapsed (new) - used with lotusText on the comment textarea to decrease the textarea height.
  • Wrappers:
    • lotusBoard - goes on a div surrounding a UI that shows comments, and updates, and allows replies on comments.
    • lotusStream - goes on an unordered list that creates an activity stream. Needs to be inside a lotusBoard wrapper.

Basic Implementation

The best way to describe how to do posts is to look at the code and the example pages. We've basically created a shell that can present posts in a variety of ways, but always with author information in one area (to the left) and the rest of the information in another area.

There are lots of divs with classes to allow this component to be flexible in presentation options (see descriptions in the "Classes" section, above).

Posts can have a delete button, which appears last in the code (for screen readers) but shows up in the upper right-hand corner.

Posts look different depending on their context. These are detailed in the various post component pages.

The posts on this page are what would show up on a bulletin board/activity stream.

Comments lists in an activity stream are styled differently, via the lotusBoard wrapper.

Note: when using inline actions in a post, you will need to programmatically hide the lotusPostMore div when the lotusPostInlineActions div is showing. An example of posts with inline actions is on the comments component page, in the Embedded Comment List example.

Diagram of a Post

Accessibility

Note: Posts have not been fully reviewed for accessibility, although there are some ARIA attributes in place.

Put role="article" on the lotusPost article tag/div. Put tabindex="0" if you want the post to be included in the tab order (posts in an activity stream need this).

Put alt="" on the person's avatar because their name is listed in the post and this would just be duplicate text.

Put role="button" on action links.

Examples

Sample HTML - Basic

Sample HTML - File / Image File (with comments)

Sample HTML - Bookmark

Sample HTML - Status (with optional delete button)

Sample HTML - Repost

Sample HTML - Older Board Post

CSS (comments.css)

Theme CSS (commentsTheme.css)

This component is the base for all types of user input attributed to them. It was created as a second generation iteration of comments.

October 2011: Added some additional classes to allow for more flexibility of post content.

January 2012: left-aligned the comment action links.

January 26, 2012: Adjusted avatar to better align with content and moved embedded comments to the left.

February 13, 2012: Added the lotusPostIndicator icon that is visible at the same time as the inline actions. Also updated lotusDelete to only show then too.

February 16, 2012: Added lotusTextCollapsed to be used on the "Add a comment" textarea.

March 6, 2012: Wrapped lotusIndicator in an anchor and added roles and aria-labels for accessibility.

See Also: