Feature 85 - Hero statement with bordered grid of icon features

Pro

Bordered container with a large centered headline, image, and tagline above a six-item icon feature grid separated by single-pixel dividers.

Shadcn Feature 85 block

Component Data

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

Feature 85 block design & features

Feature85 is a two-part section with architectural border framing. The upper zone is a tall container with left and right hairline borders, holding a centered headline, a wide rounded image, and a secondary tagline. A faded linear grid pattern fills the upper background with a radial clip mask. Below that, a border-top introduces a six-item feature grid rendered in three columns on large screens and two on medium. Each cell contains a Lucide icon, a title, and a description paragraph, all placed on a muted surface.

Visual separation between grid cells is achieved with single-pixel gap lines colored in muted foreground at low opacity, creating an architectural blueprint feel. The upper container uses generous vertical padding and constrains its content to a narrow max-width column. Icon sizes step up slightly on medium breakpoints. An empty bordered footer row closes the composition.

The aesthetic is editorial and structured, borrowing from magazine or blueprint layouts with its deliberate use of thin borders and grid lines rather than cards or shadows. Complexity is moderate because you supply six feature objects with icons, titles, and descriptions along with headline and tagline text.

At smaller screen sizes the feature grid collapses to a single column, with each cell placing the icon and text content side by side in a horizontal row rather than stacking vertically.