Feature 222 block design & features
Feature222 lays out up to six large story cards in a responsive grid built with Shadcn UI primitives. Entire surfaces act as anchors with CSS background imagery, softened by a tinted overlay layer that deepens contrast for white headline text. Near the footer of each tile, two compact stat stacks show a numeral plus short caption side by side, followed by an outline button labeled Learn more with a trailing arrow icon.
Rounded corners unify every card while hover states subtly lighten the darkening scrim over the photography. Typography inside the overlays is condensed and headline-driven; supporting numbers read smaller with reduced opacity captions. Density is tighter at the bottom of each card where stats and controls cluster.
Overall this skews cinematic and editorial rather than minimalist icon grids. Complexity is moderate to high depending on catalog size because each card relies on strong photography and plausible metrics alongside titles and outbound links.
The masonry-like vertical rhythm adjusts from one column through three as width grows, keeping gutters consistent for predictable scanning paths on tablets and desktops.