Header

Headers sit at the top of the content area of the page, providing the user with a "title" and often a description and/or page-specific actions. Filters are a feature of a header, which shows the user which filters are applied to the page, and allows them to remove them.

Simple Header

Header With Filters

Header With Image

Classes

  • lotusHeader - the class assigned to the component div
  • lotusHeading - the class assigned to the H1 tag
  • lotusDetails - the class assigned a div that sits under the h1 tag and wraps any detailed information
  • lotusFilters2 - the class assigned to a div that wraps filters that apply to the page.
  • lotusFilter - the class assigned to a a filter link.
  • lotusClose - the class assigned to the close "X."
  • lotusDivider - the class assigned to the dividers between filters.
  • lotusLayout - for headers with images to the left, use a lotusLayout table inside the lotusHeader div.

Other classes - like lotusBtnContainer, lotusMeta and lotusAction, to name a few - can be found inside a header.

Basic Implementation

Create the HTML5 header element (or div) and assign it the class of lotusHeader. Inside that, place an h1 tag with the class lotusHeading to wrap your page header text.

If you have additional details, place them inside a div assigned the class of lotusDetails after your h1 text.

Variations

A filter component can exist following the heading element.

If you have a complex header that requires a layout table for alignment, place a table assigned the class of lotusLayout inside the wrapping lotusHeader div.

Accessibility

If using a layout table, see the accessibilty section for the Layout Tables component.

If including filters, see the accessibility section for filters.

Examples

Sample HTML - Simple Header

Sample HTML - Header With Filters

Sample HTML - Header With Image

CSS (header.css)

Theme CSS (headerTheme.css)

Headers use the only h1 tag on the page because they are the title of the page. (Update Jan 2011: for accessibility, popup dialogs also use h1 tags - they are considered a new document.)

September 2010: accessibility fixes to style using the lotusHeading class rather than the h1 tag.

January 2011: added accessibility documentation.