Studiov1.2.3
Studio/Patterns/Feature Grid

Feature Grid

Layout

Responsive 2-4 column grid of feature cards, each with an icon, title, and short description. Used to present capabilities or benefits.

All patterns
Feature
Signal
Action
Use Cases
  • Product feature overviews
  • Service offerings on landing pages
  • About page capability highlights
  • Three Lanes presentation (PRT A/B/C units)
Do
  • Use consistent card heights within a row
  • Keep descriptions under 2 lines
  • Use brand-colored icons or accent borders
  • Maintain 2-col on tablet, 3-4 on desktop
Avoid
  • Mix card sizes in the same grid
  • Use more than 12 cards in a single grid
  • Add interactive elements (forms, toggles) inside cards
  • Use full paragraphs as descriptions
Reference component: FeatureGridVariants: 3Token bindings: 5