Separator Line
Last Updated 09.28.03
General Description
A separator line is used to divide contextual
information and/or static content from changing content within a page. The
separator line is also commonly used to divide a persistant component (which
provides contextual information to a page) from the rest of the contents
on a page. For instance, the Locator Element:
Train component uses the separator line component, and the Quick
Links bar uses the separator line component. Guideline Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Nute
UI Models - all models
Example Products - HR Modules, SSP and Oracle Exchange (shopping cart area), BI applications
Related Guidelines - Headers,
Locator Element: Train, Quick
Links, Contextual Information
Interaction and Usage Specifications
General Principles
- The separator line spans the entire width of the contents area of a page.
- The separator line can be used to separate contextual content on a page,
from updatable or other content. For example, in some HR modules, employee
information is displayed at the top of every screen indicating which
employee is selected to update his or her data. A separator line is
used to divide this static information from the rest of the content
on the page. From page to page, this contextual information and the
separator line remain context while the other portion of the contents
area refreshes with new updatable information. See the Contextual
Information guideline for details.
- The separator line appears after the quick link bar, at the top of the page to separate the quick links from the rest of the contents of the page.
- The separator line appears after the train component to separate the train from the rest of the content on a page. The train and separator line are persistant through the linear process, while the contents changes from page to page.
Visual Specifications
General Visual Principles
- The separator is made up of 1x1 pixels.
- The color of the pixel= dark blue (#336699).
- The space between each 1x1 pixel is 5 pixels.
- The entire line spans the width of the contents area on the page.
- For spacing above and below the separator line, see Content
Layout: Spacing Above and Below Various Components.
Measurement and Layout Diagram of Separator Line
Example of Separator Line in a Page
Below is an example page of a separator line used with contextual information.
Below is an example page of a separator line used with the train.
Open/Closed Issues
Open Issues
None
Closed Issues
None