Content area

Most pages on the website are content pages. For this reason, these pages have a clean, simple layout. Pages with siblings can have an optional sidebar, which appears on the right side of the screen. Pages without a sidebar are full-width.

Development info

  • Stylesheet location: /source-v6/styles/base/_global.scss
  • Stylesheet location for sidebar: /source-v6/styles/layout/_sidebar.scss
  • In Dreamweaver, use the template property Layout to determine if the page has a sidebar or not.
    • two-col includes sidebar
    • one-col doesn’t include sidebar
  • In WordPress, check or uncheck the “Include sibling navigation” option in the PCC Sidebar settings box.

Styling

The content area is white in order to increase text readability and to make the pages clean and modern. The white content area also contrasts with the dark header and footer.

A note on the content area styles: the body background color is blue and the content background color is white. This makes sure the blue behind the footer stretches all the way to the bottom of the window, even on pages with small amounts of content. If the body background color is white, the footer is only a thin blue strip with white below it.

Responsive behavior

Content pages don’t change drastically on small screens. Callout boxes (if present) stack vertically, and the sidebar moves below the other page content (the same as program homepages). No content is hidden when the screen size decreases (this is true across the entire website).

Most pages on the website have a sidebar. The sidebar includes sibling-level navigation and optional highlight callouts.

Sidebar example

Content page: with sidebar

Full-width pages

Full-width pages don’t include the sidebar. They’re reserved for:

  • bottom-level content pages
  • site homepages
  • custom-designed pages

If the page has sibling pages, it should have a sidebar in most cases.

Full-width examples
With page components

Content page: no sidebar, with page components

Plain text

Content page: no sidebar, with only text