Utilities ~ Toggle
Simple visual state changes
The toggle utility provides simple ways to show or hide elements or parts of elements. This behavioral pattern can be used throughout your design, atomics and components.
Show & hide
Elements can be hidden per breakpoint using the utility class syntax {classprefix}_hidden@{$breakpoint}
XXL
XL
L
M
S
XS
Triggers
The toggle utility allows the showing/hiding of elements based upon a trigger. The trigger element, optional toggle icons and content to show and hide are all flexible.
Toggle content
Toggle content 1
Toggle content 2
Accordion
A simple accordion constructed from a button group and the toggle utility.