Toolbars

Toolbars are responsive meta components that serve as navigation headers for your application or site. Toolbars appear a step above the sheet of paper affected by their actions.

The header keeps its seam with the page, and is pushed off screen.

<header class="header"> ... </header>

The header is presented as seamed with the page.

<header class="header header-seamed"> ... </header>

The header is a step above the page content.

<header class="header header-standard"> ... </header>

Similar to standard header, but header is initially presented as seamed with page, but then separates to form the step.

<header class="header header-waterfall"> ... </header>

Add additional helper classes to apply background colours on toolbars: .header-brand, .header-brand-accent, .header-green, .header-orange & .header-red.

Alternatively, add .header-transparent to remove background colours from toolbars.