Content Layout Templates

Last Updated 08.06.02

General Description

This guideline provides specification of how widgets and content are rendered on a page - specifically, their spacing and layout. The various topics discussed in this guideline are: NOTE: Spacing is provided automatically using Cabo components. For common contextual layouts (i.e., layouts displaying specific content such as an address or a name) see Common Formats.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Raymond Wong, Mervyn Dennehy
UI Models - all models
Example Products - all products
Related Guidelines - Text Standards, Header Component, Page Templates, Tabs/Navigation, Breadcrumbs,
Train, Quick Links, Separator, Instruction Text, Message Box, Ski, Standard Web Widgets, Partial Page Rendering (PPR)

Interaction and Usage Specifications

Spacing of Page Contents

Following typical page layout design theories and information design principles, page content should be broken into sections, so that spacing aids the user in distinguishing high level sections from subsections.

Spacing Measurements For Various Page Components


Space Above

Space Below


6 pixels 1 pixel

Quick Links 

6 pixels None


5 pixels None


5 pixels 5 pixels

Page Title 

7 pixels 2 pixels


10 pixels - 1st occurring
Subheader on page
20 pixels - Subsequent
2 pixels


10 pixels 2 pixels

Instruction Text 

3 pixels None

Message Box 

5 pixels None


10 pixels 2 pixels

Visual Examples Of Spacing With Measurements For Common Page Components

Breadcrumbs / Page Title / Subheader

Train / Separator / Page Title

Breadcrumbs / Quick Links / Separator / Page Title / Instruction Text / Subheaders / Subsubheaders / Ski

Breadcrumbs / Message Box / Page Title

Page Layout of Standard Web Widgets

Standard label/data layout terminology is as follows: In general, the following guidelines apply to various forms of label/data layouts within a page:

Visual Examples of Standard Widget Layouts

Standard Web Widgets as Label/Data Pairs, Combination and Group

Single Column Standard Web Widget Layout

Two Column Standard Web Widget Layout

Two Column Standard Layout With Spanning -(Arrow indicates overall tab order)

Various Standard Web Widget Combinations

Content Layout and PPR

Partial Page Redraw (PPR) can be used to refresh portions of page content when users make selections in primary fields that control display of that content. For example, when a user selects an option in a choice list, related fields below that choice list may change to reflect the choice. In this case, the choice list is referred to as the "controlling" field, and the related fields are referred to as "dependent" fields.

Principles for use of PPR with controlling and dependent fields are as follows: Controlling Field Adds or Removes Fields/Widgets Below

Controlling Field Changes Content in Dependent Fields

Controlling Field Changes Content and/or Adds/Removes Fields/Widgets

Multiple Controlling Fields with Multiple Dependencies

Nested Label/Data Layouts

Visual Examples of Nested Label/Data Layouts

A Label/Data Group With a Nested Label/Data Group

Single-Column Label/Data Group Nested Within a Radio Group

Multiple-Column Label/Data Groups Nested Within a Radio Group

Nested Label/Data Group In a Two Column Page Section

Horizontal Scrolling