Web Style Guide Navigation

The Basic Page Template

Although there are several templates used throughout the Marlboro site, most pages are built on a standard page template with a flexible set of editable regions. This lets page editors create a variety of layouts within a single template.

Here’s what this page looks like while being edited:

A screenshot of page editing in LiveWhale.

Here’s a brief description of each of the editable regions (outlined in yellow).

Main content area

intro 
Although technically optional, it’s highly recommended that every webpage on the Marlboro site begin with a short (1-2 sentence) introductory overview of its contents. This helps visitors quickly determine if this page contains the information they’re looking for.

side-image
This space can be used for a small image to accompany the primary page content. It’s truly optional; if left blank, the main content will be full width.

main-content
This is used for the main content of the page.

left-column and right-column
These optional content areas can be used to create a two-column layout. If only one area has content, it will display at full width.

sub-content
This is an additional optional full width content area, to be used along with the left and right columns as needed.

Sidebar content areas

related-links-header and related-links
The “Related Links” element can be used on any page to list useful “quick links” that your visitors might need quick reference to.  The area is optional; if the related-links area contains no content, the entire element will be hidden.

sidebar-content
This is an additional content area below the navigation and related links; it can be used for a news story or photo widget, or any other secondary information that might be useful to page visitors.

 

Detours

(a mostly random selection of Marlboro microdestinations)