# Feature Item

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

# Feature Item

A single feature callout — an optional leading icon badge, a title, and a short description. The building block of FeatureGrid, and usable standalone in any card or column. Part of the Splash Kit.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<FeatureItem />

## When to Use

-   One feature, capability, or benefit with an icon, title, and short blurb
-   As a child of [FeatureGrid](/components/feature-grid) for a responsive feature section
-   Standalone inside a Card, a sidebar, or any column where a single callout fits

Preview Code

Basic

### Fast by default

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

Preview Code

Without an Icon

### Native components

Pure Razor with thin interop where it counts — no JS framework overhead.

Preview Code

With Extra Content

### Accessible

WAI-ARIA roles, keyboard navigation, and focus management built in.

[Learn more](/docs/accessibility)

Preview Code

In a Feature Grid

## Composes into a grid

### Fast

Small CSS bundle, tree-shakeable.

### Themeable

Every color is a CSS variable.

## API Reference

Property

Type

Default

Description

Title

string?

—

The feature heading.

Description

string?

—

Supporting text below the title.

IconContent

RenderFragment?

—

Optional leading icon, rendered in a tinted rounded badge above the title. Named `IconContent` so the `Icon` component can be used inside it.

ChildContent

RenderFragment?

—

Extra content rendered after the description (e.g. a link or button).

Class

string?

—

Additional CSS classes appended to the item root.

## Related Components

-   [Feature Grid](/components/feature-grid) — Responsive grid that lays out FeatureItem children
-   [Hero](/components/hero) — Opening band that typically precedes a feature section
-   [Bento](/components/bento) — Asymmetric grid layout for richer feature showcases