Skip to main content link. Accesskey S

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.

Directionality:

Simple Header

Header With Filters

Header With Image

Classes

  • lotusHeader - the class assigned to the component div
  • lotusDetails - the class assigned a div that sits under the h2 tag and wraps any detailed information
  • lotusFilters - 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 div and assign it the class of lotusHeader. Inside that, place an h1 tag with your page header text.

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

Variations

If the page is filtered, create a div and assign it the class of lotusFilters. Create a link for each filter and assign it the class of lotusFilter.

Inside each link, place the filter text, and then the following code: <span class="lotusClose">X</span>.

In between each filter, put a span assigned the class of lotusDivider surrounding a pipe (|).

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.

Examples

Sample HTML - Simple Header

Sample HTML - Header With Filters

Sample HTML - Header With Image

CSS (header.css)

Theme CSS (headerTheme.css)

Headers have morphed a lot during their history, the newest iteration being filters. They use the only h1 tag on the page because they are the title of the page.

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.