Tips

The tips box is used to give the user information on using the page. It can have a close icon so the user can dismiss it.

The title of the box is always "Tips."

Classes

  • lotusTips - this class goes on the div that wraps the tips component.
  • lotusTipsHeader - the class assigned to the html5 header tag.
  • lotusHeading - the class assigned to the html5 heading tag.
  • lotusTipsBody - this class goes on a div that wraps the tips text.

Basic Implementation

The tips box sits in the left or right column, independent of a section.

The tips box uses an h3 tag, or equivalent, for the title.

An optional close button is placed in the html5 header component along with the heading text.

Accessibility

Put the ARIA role note on the lotusTips div.

Examples

Sample HTML

CSS (tips.css)

Theme CSS (tipsTheme.css)

The tips box originally used the lotusInfoBox component name and the help component was a variation of lotusInfoBox.

September 2010: Created a new version of tips that uses the lotusTips class. The tips component no longer shares styles with the help component. Wrapped the heading text in an HTML5 header and removed the close image from the heading tag to meet accessibility requirements.

January 2011: added accessibility documentation.

March 15, 2012: updated the tip sample text.