Toggles

.Toggle

Toggles can be used to switch things on or off, hide or show things, etc. Especially useful combined with an Icon.

The Toggle changes state by adding or removing the is-on class.

Note: Click the toggles to switch them on or off.

Note 2: The ids in the markup are only there to make the toggles switchable in the pattern library.

Example

Hello! Good bye!

Markup

<span id="Pattern1Toggle" class="Toggle">
    <button class="Toggle-on Icon Icon--large Icon--standalone Icon--menu">
        <span class="Icon-label">Open menu</span>
    </button>

    <button class="Toggle-off Icon Icon--large Icon--standalone Icon--x">
        <span class="Icon-label">Close menu</span>
    </button>
</span>

<span id="Pattern2Toggle" class="Toggle">
    <span class="Toggle-on">Hello!</span>

    <span class="Toggle-off">Good bye!</span>
</span>

Secondary nav toggle

.Toggle--sections

This toggle is used to hide or show the menus in Set--sections and is shown when the menus get stacked on smaller viewport sizes.

Note: Shrink your browser window to make it appear.

Example

Markup

<div id="SectionsToggle" class="Toggle Toggle--sections">
    <button class="Toggle-on Icon Icon--large Icon--standalone Icon--menu">
        <span class="Icon-label">Open menu</span>
    </button>

    <button class="Toggle-off Icon Icon--large Icon--standalone Icon--x">
        <span class="Icon-label">Close menu</span>
    </button>
</div>