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
- 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.