Search blocks by description or jump to a page.
Tabs styled as raised cards, where the active panel lifts above the rest. Great for settings pages or dashboards that group related content into sections.
Card Tabs is a three-trigger tab switcher centered on the page. The trigger strip sits inside a bordered, rounded container with a soft shadow. Each trigger occupies one equal column of a three-column grid, and the active trigger lifts out of the strip by gaining its own background and a subtle shadow. Below the strip, the active panel renders in its own bordered card with a heading and a short description.
The trigger labels, panel headings, and body copy are all independent, so you can rename each tab and rewrite the content beneath it without touching the layout. The three-column grid is the demo default; add or remove triggers as your sections require, and the strip will redistribute the columns automatically.
Reach for this block when a settings or account screen needs to separate a handful of distinct sections and each section has its own form or content area. In a fintech or banking product it works well for grouping Account details, Security credentials, and Notification preferences so users can navigate without scrolling through one long page. The raised-card treatment gives the active selection a tactile, clearly selected feel that is more prominent than a plain underline tab but less decorative than a gradient or pill style.
A natural flow around it on a Components page:
Before
After
The block frames any grouped settings content that benefits from card surfaces. A few common fits:
Tip: keep tab labels to one or two short words so the three-column strip stays balanced and nothing wraps at narrow widths.