Sidebars

The boxes that go beside a page's content. All from CMU's standard template; nothing here needs the kit.

Sidebar Boxes

Each div in a .sidebar is a box. A plain one is gray; add a color, a link list or a thin rule instead of a box.

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

Sign In

For a page that needs you signed in, as on Binder: a red box at the top of the sidebar that says why, with one wide Sign In button, and a note under it about who can sign in. It's the template's sidebar box with red invert and btn wide.

sidebar, red invert, btn wide, left-rule

Header Link or Sidebar Box?

Every page has the Sign In link in the header, beside the menu button. Add the sidebar box when there's little to do until you sign in.

• The sidebar box is for a page that does little for people who aren't signed in, as on Binder, which shows only a countdown until you sign in. Say what signing in lets you do, not just that you must.
• The header link alone is for a page that's useful signed out. On the Syllabus Registry's Browse page, anyone can search the course sections; signing in adds the instructors and uploading.
• A link that needs sign-in keeps its place in the text with " [login required]" after it.
• Always "Sign In" and "Sign Out," never "Log In."

Button Box

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

• In a colored box, with a ghost button, as on University Communications & Marketing's Guidelines for News Images, which offers the guidelines as a PDF.
• On its own, a solid button in a simple box (no background), as on Computing Services' video production page, 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

A list box with a left rule at the top of the sidebar, for the handful of places people come to the page for, as on CMU's Fifth Year Scholars page. 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

Links to the sections of a long page go in a sidebar link list, as on First-Year Orientation's schedule page. 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