Feature Grid
A responsive 1/2/3/4-column grid for landing-page feature callouts. Pair FeatureGrid with FeatureItem children, or pass raw content for full control. Part of the Splash Kit.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <FeatureGrid />
When to Use
- The feature-highlights section of a marketing or product page
- "Why us" / capability grids with an icon, title, and short description per item
- Any responsive grid of equal-weight callouts that should reflow by breakpoint
Everything in the box
A focused set of primitives that compose into anything.
Theming
Every color is a CSS variable. Swap themes and dark mode without touching components.
Accessible
WAI-ARIA roles, keyboard navigation, and focus management built in.
Density
Flip an entire panel between compact, comfortable, and spacious.
Built for Blazor
Native components
No JS framework interop overhead — pure Razor with thin interop where it counts.
Source generators
The [LumeoForm] generator wires up validation and binding for you.
The full stack
Fast
Small CSS bundle, tree-shakeable.
Secure
Sane defaults, no surprises.
Themeable
Every color is a CSS variable.
Accessible
ARIA and keyboard built in.
Fast by default
A small CSS bundle and tree-shakeable components keep your app lean.
API Reference
FeatureGrid
FeatureItem
Related Components
- Hero — Opening band that typically precedes a feature grid
- CTA Section — Closing call-to-action band
- Bento — Asymmetric grid layout for richer feature showcases