Showcase Tabs os-008

Also known as: Vertical tabs, Services section, Feature rotator

Present services or features one at a time: a vertical auto-playing tab list paired with a media pane.

Example

default

How I can help you

(Services)

Variants

Single variant (default). Set --og-showcase-interval to change the autoplay speed; autoplay is disabled entirely under prefers-reduced-motion.

How it works

A section pattern: a vertical tablist of numbered services on the left, a media stage on the right. One item is active at a time; its description expands (grid-template-rows 0fr→1fr) and its image crossfades in on the stage. Autoplay advances every 5s; a 2px progress bar fills down the active item's left rail (pure CSS animation, restarted by JS on each change). Hovering the stage pauses autoplay; clicking a tab or arrow re-anchors it. The source's spring-physics slide transition was simplified to a crossfade during assimilation — noted as a deliberate translation choice, not a gap. Respects prefers-reduced-motion (no autoplay, no animations). Known gaps: no visible pause/stop control for autoplay beyond hover (WCAG 2.2.2 wants an explicit one), and no arrow-key navigation within the tablist.

Relationships

The section-scale sibling of os-002 Tabs (vertical orientation) and os-004 Carousel (rotating media with prev/next arrows).

Parameters

Name	Type	Default	Description
`items`	array	—	Showcase items: `{number, title, description, image, alt}`
`--og-showcase-interval`	CSS time	`5s`	Autoplay interval (CSS custom property; JS reads the same value)
`title`	string	—	Section heading
`eyebrow`	string	—	Uppercase label under the heading

Tokens

--color-bg --color-bg-muted --color-text --color-text-muted --color-border-subtle --color-border-focus --text-xs --text-sm --text-xl --text-2xl --text-3xl --weight-regular --weight-medium --leading-relaxed --tracking-tight --radius-2xl --radius-full --spacing-1 --spacing-2 --spacing-4 --spacing-6 --spacing-12 --spacing-16 --container-max --transition-fast --transition-base --transition-slow

Provenance

Variant	Proven in	Live at	Date
`default`	21st.dev — @0xUrvish "Vertical Tabs" (external assimilation)	21st.dev	2026-08-08

Assimilated from the ODS-Components bookmark collection. Translated from React + motion (framer) to tokenized vanilla CSS + small JS; no license declared on the source listing — re-check before redistributable use.

Code

os-008 · Source: packages/og-showcase-tabs.css ▾

<link rel="stylesheet" href="og-showcase-tabs.css">

<section class="og-showcase">
  <div class="og-showcase__grid">
    <div class="og-showcase__intro">
      <h2 class="og-showcase__title">How I can help you</h2>
      <span class="og-showcase__eyebrow">(Services)</span>
      <div class="og-showcase__tabs" role="tablist" aria-orientation="vertical">
        <button class="og-showcase__tab" role="tab" aria-selected="true"
                aria-controls="sc-img-1">
          <span class="og-showcase__progress" aria-hidden="true"></span>
          <span class="og-showcase__num">/01</span>
          <span class="og-showcase__body">
            <span class="og-showcase__label">Web Design</span>
            <span class="og-showcase__desc"><span><p>…</p></span></span>
          </span>
        </button>
      </div>
    </div>
    <div class="og-showcase__stage">
      <img class="og-showcase__img active" id="sc-img-1" role="tabpanel" src="…" alt="…">
      <div class="og-showcase__nav">…prev/next arrows…</div>
    </div>
  </div>
</section>
<!-- behavior script: see packages/og-showcase-tabs.html -->