Sidebars

Boxes beside the content: gray and colored boxes, a button box, quick links and On This Page.

Sidebar Boxes Template

Each div in a .sidebar is a box, with no background of its own. Add a color, such as grey for help and contacts, a link list or a thin rule instead of a box. For which color to use, see Colors.

sidebar, simple, left-rule, list, a color with invert

Button Box Template

One wide button at the top of the sidebar, for the one thing to do or take away from the page. Two ways:

• In a colored box, with a ghost button, which offers the guidelines as a PDF.
• On its own, a solid button in a simple box (no background), where each section's sidebar has a Request button for that service.

Say what the button does and, for a file, what kind it is.

sidebar, red invert, simple, btn wide, ghost

Quick Links Template

A list box with a left rule at the top of the sidebar, for the handful of places people come to the page for. Each link gets a rule above it and an arrow. A dark box with a ruled heading under it is the usual place for questions and contacts.

list left-rule, darkgrey invert, rule-bottom, cta

On This Page Template

Links to the sections of a long page go in a sidebar link list. It's the template's list left-rule box: each link points to a section heading's id, and the template scrolls to it. Put it first in the sidebar, and leave it off pages short enough to see at a glance.

list left-rule, links to #id