Component Order

Last Updated 03.06.03

General Description

There is a specific order to how components are laid out vertically on a page. Not every component is used in one single instance of a page, but since many combinations of components on a page are possible, it is important to have consistency regarding which order the components appear vertically. This guideline provides the correct vertical layout order for components.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Lisa Serface
UI Models - all models
Example Products - all products
Related Guidelines - All Components

Interaction and Usage Specifications

General Principles

Visual Specifications

Vertical Layout Order of Components on a Page
NOTE: Not all of these components are used on a single page, and many components are not necessarily required unless noted.
  1. Branding - Global Buttons (components are parallel) [both required]
  2. Tab/Horizontal Navigation (tab bar/level 1 and possibly horizontal navigation/level 2; or "no tabs" bar) [required]
  3. Page Stamps (for login information only; see below for other types of page stamps)
  4. Locator Element: Train (used if applicable to page template)
  5. Locator Element: Breadcrumbs (used if applicable to application usage)
  6. Message Box (used if applicable to page template)
  7. Quick Links Bar (used if applicable to page)
  8. Header (primary header on page or page title) [required]
  9. Contextual Information (applicable to entire page [only], and used only if necessary.)
  10. Instruction Text (used if necessary for entire page contents)
  11. Page Stamp - Primary Page Stamp Location (used if applicable to entire page contents)
  12. Key Notation (used if applicable to entire page contents)
  13. Application Content
    NOTE: Some components may be nested in the middle of a content section like Hide/Show and Instruction text, and not necessarily related to an entire section of content. If so, these components are placed left aligned within the content area of the corresponding header.
  14. SubHeader (if applicable to content on page)
  15. Hide/Show (used if applicable to section of content)
  16. Instruction Text (used if applicable to section of content)
  17. Page Stamp - Section Level Page Stamp Location (used if applicable to section of content)
  18. Key Notation (used if applicable to section of content)
  19. Application Content
    NOTE: Number of sections (headers, subheaders, and/or subsubheaders) varies per page depending on the content.
  20. Page Stamp - Secondary Page Stamp Location (used if applicable to entire page contents)
  21. Page Bottom Line or Ski [required except home page only]
  22. Page Level Action/Navigation Buttons
  23. Page Footer [required]

Open/Closed Issues