Skip to main content link. Accesskey S

Comment

Comments occur in various places in our UI. They have a basic structure of author information on the left, and other various content on the right.

Comments can appear in various "containers" and their look can vary depending on what container they are in. See example pages for examples of comments in containers. The comments shown here are the individual comments.

Besides the basic comment and comment variants, we have a status version of a comment, and a plain comment bubble that allows you to present text as if someone is speaking it (like in the comic strips).

In order to retire our first implementation of comments, our basic comment classes use the lotusPost class and its variants.

Directionality:

Comment on a profile "board"

Status on a profile "board"

Comment in a Forum

Update Status

Comment Bubble

Classes:

  • lotusPost - put this on outermost div
  • lotusPostAuthorInfo - create an inner div and give it this class
  • lotusPostAvatar - this div wraps the author's photo
  • lotusPostName - this appears on comments in a forum
  • lotusPostContent - this class wraps the rest of the comment information
  • lotusPostDetails - This class is on the div that wraps the text of the comment.
  • lotusUpdateStatus - This is an additional class that goes on a comment used to update a person's status.
  • Wrappers:
  • lotusCommentList - this class is assigned to a ul tag that contains a list of comments.
  • lotusCommentItem - this class is assigned to an li tag that contains a comment.
  • 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.
  • lotusBoard - goes on a div surrounding a UI that shows comments, and updates, and allows replies on comments.
  • lotusForum - this calls goes on a div that wraps replies in a forum.
  • lotusChild - goes on any nested ul tags in a forum reply list

Basic Implementation

The best way to describe how to do comments is to look at the code and the example pages. We've basically created a shell that can present comments 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.

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

Comments look different depending on their context:

The board is Connections version of a bulletin board. It contains comments, status updates, and comments on comments.

A forum contains an original comment post and a series of replies contained in a comment list (which can be nested).

Comments appear in comment lists in other areas of the UI, but they are flat lists and can be styled differently depending on their context.

Examples

Sample HTML

Sample HTML - Profile Board

Sample HTML - Status

Sample HTML - in Forum

Sample HTML - Update Status

Sample HTML - Bubble

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 available now.

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.