Feature 83 - Two-column feature cards with badge and dot grid

Pro

Split layout pairing a badge, heading, and description on one side with three bordered feature cards over a radial dot-grid background.

Vue
Shadcn Feature 83 block

Component Data

  • ID:feature83
  • Access:pro
  • Created:Oct 9, 2024
  • Type:block

Feature 83 block design & features

Feature83 is a two-column section built with Shadcn UI. The right column holds an outline badge, a large semibold heading, and a muted description paragraph. The left column renders up to three vertical cards, each displaying a bordered icon container, a medium-weight title, and a short description. Behind the card column sits a decorative radial dot-grid pattern with an elliptical mask that fades to transparent.

Cards use a white background with a subtle border, giving each item a contained feel without heavy elevation. The icon boxes are small bordered squares centered inside each card. Text is compact, with tracking-tight headings and small muted body copy. The dot pattern appears at partial opacity so it adds texture without competing with card content.

The style reads as minimal and structured. The decorative background adds a layer of visual interest that keeps the section from feeling flat, but the overall mood stays professional and restrained. Complexity is moderate because you supply a label, heading, description, and up to three feature objects with icons.

On mobile the two-column grid stacks with the text content appearing first and the three cards dropping below in a single column.