# Feature Grid

Source: https://lumeo.nativ.sh/components/feature-grid

# 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

Preview Code

Basic Feature Grid

## 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.

Copy Code

Preview Code

Two Columns

## 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.

Copy Code

Preview Code

Standalone Feature Item

### Fast by default

A small CSS bundle and tree-shakeable components keep your app lean.

Copy Code

## 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](/components/hero) — Opening band that typically precedes a feature grid
-   [CTA Section](/components/cta-section) — Closing call-to-action band
-   [Bento](/components/bento) — Asymmetric grid layout for richer feature showcases