User observation has shown that the first thing users do when they come to a page is quickly scan it or browse it for key phrases first, then they read the information once they find what's relevant.
The variety of page headlines below facilitates this process. Incorporate sub-headlines into your content as often as possible so that the information can be divided into easily differentiated modules. Make sure these headlines support the overall information architecture and are written in accordance with Cisco's editorial guidelines.
The variety of page headlines below facilitates this process. Incorporate sub-headlines into your content as often as possible so that the information can be divided into easily differentiated modules. Make sure these headlines support the overall information architecture and are written in accordance with Cisco's editorial guidelines.
NOTE: This code is only to be used within the framework of sitecopy content CSS as instructed in the Content CSS Developer Guide. Without the proper setup file and wrapper divs as outlined in the guide, this code will not work properly and is not supported.
Gray Box
This content element is used on root pages, landing pages/concept pages and third level pages/category to describe the purpose of the page, web site area or for a vision statement.
The Gray Box is made up of:
- A headline which is the main concept for the collection of pages below. It is written in headline style (with subject/verb), and focuses on user benefit. Try to keep it as a single line of copy, typically 25-35 characters.
- Optional sub-headline to support the headline further clarifying or providing more information. It is no longer than two lines of copy in length and not to exceed 80 characters. Use any type of sub-headline: gray, mustard or blue if you want to link to other content.
- A short paragraph of text explaining the benefit of the product or service, or explaining a particular solution or technology. It may contain two to three lines of copy in length and not to exceed 160 characters. It may also contain a link to additional information using a verb phrase (i.e., Learn more, View video, etc.).
- The spotlight image is a standard B-size photograph which is 115 x 191 pixels. Use an existing image from the Cisco Marketing Library or contact Corp ID for a custom image.
View the code for this element
Primary Header (h1)
Primary headers are used for specific editorial content such as a product solution, marketing promotion, case study, or industry solution. Any type of content representing a main idea for the page is appropriate. Although there is no limit to the number used, a page typically contains a maximum of three primary headers. They can be used on any type of page.
For more information about nested "items," see the Content CSS Developer Guide.
The primary header is a headline, written in headline style (with subject/verb), and focuses on user benefit. Try to keep it as a single line of copy, typically 25-35 characters. It can also be used effectively in conjunction with:
- An optional sub-headline, further clarifying or providing more information. It is no longer than two lines of copy in length and not to exceed 80 characters. Use any type of sub-headline: gray, mustard or blue if you want to link to other content.
- A short paragraph of text explaining the benefit of the product or service, or explains a particular solution or technology. It may contain two to three lines of copy in length and not to exceed 160 characters. It may also contain a link to additional information using a verb phrase (i.e. Learn more, View video, etc.).
- A spotlight image of any size. Use an existing image from the Cisco Marketing Library or contact Corp ID for a custom image.
Header Bars
Header bars can be light blue, dark gray or light gray. They should not wrap and should never be links. The light blue header bar is used for functional content or content that can be easily described, for example "News@Cisco" or "Contact Information." Although all three can be used in both the three- and four-column layouts and on any page, the dark and light gray header bars work best in a three column layout to break up sections of content.
Light Blue Header Bar Imbedded in the Page (h6)
Light Blue Header Bar at the Top of the Page (h6)
When the light blue header bar appears at the top of the page, it needs an additional 2 pixels at the top of the column.
Dark Gray (h6 class="alt-1") and Light Gray (h6 class="alt-2") Header Bars
These heading styles provide a more visual option for breaking up content within a page. It is best used in a 3 column layout on L4 pages, EOT pages and below. These headers also help establish the information hierarchy by starting with the dark gray header bar to introduce a section, and then using the lighter gray header bars further down on the page or throughout a section for subordinate information.
Dark Gray Header Bar
Light Gray Header Bar
Mustard Sub-headline (h2)
Use mustard sub-headlines sparingly as they are very strong visually and will stand out dramatically on the page; however, when used appropriately, the mustard sub-headlines call attention to well-written sub-headlines that effectively draw the viewer directly to it. Use them to communicate important information such as the benefits of a solution, a feature or benefit of a new product release, new uses for a technology, or a new event or seminar.
Gray Sub-headline (h3)
Gray sub-headlines work well for any type of information that needs to be organized in sections. For example, lists of links or a series of paragraphs like product descriptions. They also work well to separate longer lists of links.
Blue Sub-headline (h2 or h3 linked)
A blue sub-headline is a link.
Eyebrow Sub-headline (h5)
The following rules apply to eyebrow sub-headlines:
- Use the eyebrow treatment only when calling out information that is easily identified such as Announcements, Case Studies, Further Reading, and Additional Information. These are well-defined types of information specifically sought out by users.
- The eyebrow sub-headlines do not wrap and are therefore limited to a maximum of three words.
- To visually distinguish an eyebrow sub-headline from the rest of the content on the page, eyebrow sub-headlines are preceded by a gray rule if they are not the first item on the page.
- Depending on the size of the heading used below it, two sizes are provided. This is done to maintain the same size relationship between the two different heading sizes. For example, when it's used above a primary header, it is slightly larger than when it's used above an announcement.
