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.
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.
Fast by default
A small CSS bundle and tree-shakeable components keep your app lean.
API Reference
FeatureGrid
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | Centered section heading above the grid. |
| Subtitle | string? | — | Centered supporting text below the title. |
| Columns | int | 3 | Number of columns at the largest breakpoint. Supports 1, 2, 3, or 4; all collapse responsively on small screens. |
| ChildContent | RenderFragment? | — | The grid items — typically FeatureItem children, or raw markup. |
| Class | string? | — | Additional CSS classes appended to the root section. |
FeatureItem
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | The feature heading. |
| Description | string? | — | Supporting text below the title. |
| Icon | RenderFragment? | — | Optional leading icon, rendered in a tinted rounded badge above the title. |
| ChildContent | RenderFragment? | — | Extra content rendered after the description (e.g. a link). |
| Class | string? | — | Additional CSS classes appended to the item. |
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