Place Bar

NOTE: This component is deprecated. See the Title Bar component.

The place bar sits under the titlebar, to show you what "place" you are in. It usually indicates an area that you can join, such as an activity or community.

The bottom border of the titlebar serves as the top border of the placebar.

Classes

  • lotusPlaceBar - this is the container class on the div.
  • lotusBtnContainer - used if you will have buttons on the place bar.
  • lotusBtn - class for the individual buttons.

Basic Implementation

Create a div with class of lotusPlaceBar. Inside it, use an h2 tag for the place title. You can include buttons using the default button (see button component) and button container.

Accessibility

If still using this deprecated component, it should be included within the banner landmark with the banner and title bar.

Put role="toolbar" on the outermost div of the place bar.

Make sure any links on the place bar, if you include them, have role="button."

Examples

Sample HTML

CSS

See deprecated.css

This component started off being styled by using lotusPlaceBar as an id. This is obsolete. Assign lotusPlaceBar as a class.

See also: