Header Component

Last Updated 09.04.03

General Description

The header component is used to title and separate contents on a page. It may be used in the general body of contents of a page, in a column, in a message area, or in a content container. There are three types of headers: headers, subheaders, and subsubheaders. Each type of header has a rule (or line) underneath the text. A subheader, and a subsubheader can be subdivided into a columnar format, or adjacent sub/subsubheaders. A subheader, and a subsubheader can also be hidden or shown depending on the critical nature of the information within the section. It is also optional whether or not to use a page title icon with a header or a subheader/content container icon with a subheader.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier
UI Models - all models
Example Products - all products
Related Guidelines - Page Templates, Content Containers in Page, Text Standards, Dialogs: Messaging, Content Layout Templates, Quick Link, Language in UI, Hide/Show Component

Interaction and Usage Specifications

General Principles of Headers, Subheaders, and Subheaders Usage of Headers (all types) on Color Backgrounds

Header Visual Specifications

Headers with Icons

Headers on Different Color Backgrounds

Header Alignment and Content Spacing

Example of Indentation Spacing for Each Header Level

Header Text Color Exception (Error Header Only; not Subheader or Subsubheader)

Adjacent Sub/Subsubheaders

Hide/Show with Sub/Subsubheaders

Below are examples of Hide/Show used with a SubHeader and a SubSubHeader. The hide/show icons (see Icon Repository for exact icon) will automatically show when the hide/show option is set for a subheader and subsubheader.

Background, Text, and Rule (Line) Colors

NOTE: Use the same header, subheader, and subsubheader font size and style specified above all header types on different background colors.
  on White on Sand on Beige on Blue
Background Color White; #ffffff light beige; #f7f7e7 dark Beige; #cccc99 medium blue; #6699cc
Text Color dark blue, #336699 dark blue, #336699 very dark blue, #003366 medium beige, #ffffcc
Rule Color dark beige, #cccc99 dark beige, #cccc99 very dark blue, #003366 very dark blue, #003366

Line/Rules Specifications

Open/Closed Issues