Skip to main content
FreddieMac.com

Tabs

Example of Horizontal Tabs.

Only one set of tabs should be used on a page and a set of tabs can contain no more than SIX tabs.

The limit of one set of tabs per page is due to the fact we have enabled deep linking to tabs -- so you can create a link that goes straight to tab 3 or straight to tab 4, for example.

Guidelines

  1. Design tab labels that are short and parallel in nature.
  2. Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.  
  3. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.
  4. Do not use tabs merely to collapse multiple pages into one.
  5. Use tabs only when users don't need to see content from multiple tabs simultaneously.
    Switching back and forth between tabs puts an added burden on the user's short-term memory, increases cognitive load and interaction cost, and lowers usability.
  6. For Tabs that display as Accordions at smaller screen widths, refer to Accordion/Tab Combo.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Did you notice?

I'm a copy callout card and I'm nested inside a tab. There are many components that can be nested inside a tab.

Cool, right?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You can even nest a block grid.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Kids with mom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can even embed a pre-defined form, chart, view, or press release list.