Tabs examples

Horizontal with auto height, then vertical with a 400px token. On a phone both become an accordion. Custom JS, not jQuery UI.

Horizontal, auto height

Orientation horizontal. Height token auto. CS02 Blue.

Parallel chapters of similar length that should feel like a switcher. Prefer Accordion when every heading should stay visible in the page flow on desktop too.

Auto, pixel values, and vh. A fixed height clips overflowing copy; auto grows with the active panel.

The component becomes an accordion below the mobile breakpoint. Confirm that if the recording is desktop-only.

Vertical, 400px

Orientation vertical. Height token 400px. CS02 Orange.

Fourteen simple-content templates. Learn the shared width/columns/gap fields once; the template term only changes the track.

Seven feature-box types share items. Switching Type 1 to Type 6 is a taxonomy on the parent.

Horizontal is the storefront default. Vertical is this band.