Tabs

Usage Guidelines

Use tabs to alternate between views within the same context
Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab
Use sentence case
Use concise, plain language tab labels

Tab 1

The tab-bar affordance can use shadow-dom to establish a styleable tab-bar and panels. The required parts can be exposed for styling with consistent pseudo-elements.

Tab 2

The accordion-like collapse affordance also uses shadow-dom to establish summary-details like behavior for each section, with an option to make the toggle-states exclusive-collapse.

Tab 3

The fallback state is simply structured HTML, without any show/hide affordances. This does not require any special styling.