Callout Box

A callout box is a container for the description of your application or a welcome message. It often contains an icon. The callout box can have a background color or gradient to offset it from the rest of the page.

About Box

Welcome Box

Classes

  • lotusAboutBox or lotusWelcomeBox - The container that encloses the entire message and optional application icon. It also provides a bounding box that may have a styled border and background.
  • lotusAboutText - A container for the headings and body text that appear adjacent to the application icon. This box is not necessary for Welcome boxes.
  • lotusClose - The close box that may appear in Welcome boxes. This is not currently supported in About boxes.

Basic Implementation

Use a div container for the entire callout box. Place your application icon inside this container with a regular img tag.

Enclose all About box text within the lotusAboutText div. Use lotusHeading classes and HTML heading tags to format your headings.

Accessiblity

Add role="region" and aria-labelledby to the outermost div of the callout box. The aria-labelledby value should be the id of the callout box heading (h1 tag).

Examples

Sample HTML - About Box

Sample HTML - Welcome Box

CSS (calloutBox.css)

Theme CSS (calloutBoxTheme.css)

September 2011: The callout box is based on the about box that has been a part of the toolkit for a long time. It is very similar to the welcome box and may be used in place of both about and welcome boxes in the future.

March 8, 2012: added aria attributes to the callout boxes.