Portland Community College | Portland, Oregon Portland Community College

Content pages

All other pages on the website use one of the content page layouts – either with a sidebar or with full-width content.

Styling

Most pages on the website are content pages. For this reason, these pages have a clean, simple layout. Pages with siblings can have a sidebar, which appears on the right side of the screen. Content can also stretch to 100% the width of the 1000px wide content area.

The site title appears in the dark blue bar below the header, and the page title appears at the top of the white content area, below the breadcrumbs.

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. No content is hidden when the screen size decreases (this is true across the entire website).

Development info

Use the template property Layout to determine if the page has a sidebar or not.

  • two-col includes the sidebar.
  • one-col doesn’t include the sidebar.

Content page examples

Numbered components
Sidebar layout
  1. header, global navigation
  2. site title
  3. content area, including breadcrumbs above the content
  4. sidebar navigation
    • Can include one or two callouts below the navigation.
  5. footer
Full-width layout
  1. header, global navigation
  2. site title
  3. content area, including breadcrumbs above the content
  4. footer
Other
Sidebar

Page type: content page with sidebar, desktop

Full-width

Page type: content page with no sidebar, desktop

Full width – plain text

Page type: content page with no sidebar, plain text, desktop