Feature 169 - Line tabs over wide bordered screenshots

Pro

Outline badge, headline, and supporting copy introduce a three-trigger tab strip with circular icon chips and gradient active rules, each selection revealing a wide rounded image with a light border.

Shadcn Feature 169 block

Component Data

  • ID:feature169
  • Access:pro
  • Created:Jan 23, 2025
  • Type:block

Feature 169 block design & features

Feature169 is a tabbed feature narrative built with shadcn/ui Badge and Tabs. A top bordered band presents an Eye icon badge with short label text, a large multi-line heading about optimizing the day, and a capped-width muted paragraph about scheduling, analytics, and integrations.

The interactive row uses the line tab variant stretched across one column on small screens and three equal columns from the medium breakpoint, each trigger stacking an icon in a muted circular well, a title, and descriptive copy. Inactive triggers dim slightly while an active gradient underline animates along the bottom edge, and decorative corner dots sit on the tab rail for extra structure.

The presentation is modern SaaS marketing with emphasis on long-form tab labels rather than tiny icon strips. Three static data objects drive icons, copy, and imagery, so the maintenance surface stays predictable even though the layout includes multiple absolute accents.

Each tab’s content panel is padded and shows a single aspect-video image with rounded corners and border, giving a screenshot-like preview under the controls.