Comment

Classes:

• See the base post component for the styles used to create a basic comment.
• lotusCommentList - this class is assigned to a ul tag that contains a list of comments.
• lotusCommentsCondensed - additional class along with lotusCommentList that produces a list of condensed comments.
• lotusCommentItem - this class is assigned to an li tag that contains a comment. (Can also contain meta text or a link.)
• lotusAddComment - goes on the last li tag in a comment list (in place of the lotusCommentItem class) which wraps a UI for the user to enter a comment.
• lotusCommentInput - this class is for link inside of a lotusAddComment.

Basic Implementation

Create a post using the basic post classes (see the code snippet on this page for the relevant classes).

For a list of comments, wrap them in an unordered list with a class of lotusCommentList. Each li tag should have a class of lotusCommentItem.

If you are allowing the user to add a comment, put lotusAddComment in place of lotusCommentItem on the last li tag and include a link rather than a post inside the li tag.

A comment item can also contain text (using lotusMeta class) indicating the total number of comments or a link allowing you to expand the comment list to view all comments. See an example of this on the activity stream example page.

Variations

Condensed Comment List: put an additional class of lotusCommentsCondensed on the lotusCommentList ul tag. Condensed posts use lotusPostAction, lotusMeta, and (optional) lotusDetails divs. (See code tab for examples.)

Embedded Comment List: an embedded comment list appears either within a post or on a board. Visuals are triggered by being inside a div with a class of lotusBoard. If you want your comments to have inline actions, please see the code tab for the proper markup. Please see the base post component for the relevant class descriptions. (Inline actions are coded at the base post level.)

Accessibility

See accessibility section on base post component.

Examples

• comment list
• a comment list on a forum
• a comment list in an activity stream

Sample HTML - Basic Comment

Sample HTML - Comment List

Sample HTML - Condensed Comment List

Sample HTML - Embedded Comment List

CSS (comments.css)

Theme CSS (commentsTheme.css)

This component began as a comment bubble.

It was then decided to go with a different look for discussion forum, but the complexities of the creation of the comment bubble and it's classes remained.

Now the original comment html and classes are obsolete and we use the lotusPost class rather than lotusComment. There are many more varieties of comments (a.k.a posts) available now.

October 2011: re-organized comment documentation, creating a posts category and listing various types of posts on separate pages.

November 2011: added a condensed version of a comment list.

January 2012: left-aligned the embedded comment list action links.

January 26, 2012: Adjusted avatar to better align with content. Changed "Write something..." placeholder text to "Add a comment" to match the initial text that launches the post a comment UI.