Portland Community College | Portland, Oregon Portland Community College

Tabs

Like expandable sections, tabs are a great way to display large amounts of information in a way that doesn’t overwhelm users. They are best for displaying sequential content, or for comparing content for related subjects (such as campuses).

Tabs can include sub-headings, paragraphs, lists, buttons, expandable sections, images, icons, videos, tables, etc. Don’t use more tabs or callouts inside of tabs.

Styling

The number of tabs is limited by their length – they shouldn’t wrap to a second line except on small screens. The tabs are turquoise and look like folder tabs. The current tab is slightly darker and taller than the inactive tabs.

Responsive behavior

If there are too many tabs to display all on one line, they will switch to the mobile layout. Each tab will be on its own line. Try to avoid this on all large and on most medium screens.

Development info
  • Stylesheet location: /source-v6/styles/components/_tabs.scss
  • In WordPress, use the tabs shortcode.
  • <div class="tabs">
  • JavaScript generates most of the code and makes the tabs fully accessible. Don’t manually include any of the HTML elements besides the <div class="tabs">wrapper.
  • <div class="tabs"> <!-- or tabs shortcode opening tag -->
      <h4>Heading 1</h4> <!-- or whatever heading level is needed -->
      <p>Content</p> <!-- or whatever componenent is needed -->
      <h4>Heading 2</h4>
      <p>Content</p>
      ...
    </div> <!-- or shortcode closing tag -->

Tabs example

Cascade

705 N. Killingsworth St. Portland, OR 97217 | 971-722-6111

Rock Creek

17705 NW Springville Rd. Portland, OR 97229 | 971-722-6111

Southeast

2305 SE 82nd and Division, Portland, OR 97216 | 971-722-6111

Sylvania

12000 SW 49th Ave. Portland, OR 97219 | 971-722-6111