Feature 186 - Feature tabs with patterned background and mobile dots

Pro

A feature-tabs section with a tiled pattern backdrop, horizontal tab triggers, a wide content panel that shows an icon, title, body copy, and image, plus ghost dot buttons on small screens for picking a tab.
Shadcn Feature 186 block

Component Data

  • ID:feature186
  • Access:pro
  • Created:Jan 26, 2025
  • Type:block

Feature 186 block design & features

This section is built with Shadcn UI Tabs. A large heading and intro paragraph lead into a pill-style tab strip on a muted bordered list. Below it, the active tab reveals a rounded accent panel with generous padding: a circular primary icon, a title, a longer description, and a wide supporting image with a light border.

Behind the section, a repeating architectural SVG sits under a radial mask so the pattern fades toward the edges. The tab strip scrolls horizontally on narrow widths with subtle edge fades. On medium widths and below, a row of small ghost buttons with round indicators mirrors the current selection.

Overall the look is polished and editorial: muted surfaces, medium-weight headings, and a calm accent panel. The block is moderately complex because it combines background decoration, scroll behavior, controlled tab state, and the alternate mobile dot control pattern.

Desktop readers get the full tab strip and image in one glance; the layout keeps the narrative (icon, title, copy) to the left of the image inside the panel on wide breakpoints.