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
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <FeatureItem />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
4 tests across 1 file. Auto-generated from the test suite.
When to Use
- One feature, capability, or benefit with an icon, title, and short blurb
- As a child of FeatureGrid for a responsive feature section
- Standalone inside a Card, a sidebar, or any column where a single callout fits
Fast by default
A small CSS bundle and tree-shakeable components keep your app lean.
Native components
Pure Razor with thin interop where it counts — no JS framework overhead.
Composes into a grid
Fast
Small CSS bundle, tree-shakeable.
Themeable
Every color is a CSS variable.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | Feature heading, rendered as a bold h3 below the icon badge. |
| Description | string? | — | Supporting copy shown muted below Title. |
| IconContent | RenderFragment? | — | The icon slot rendered in the leading badge. Named IconContent (not Icon) so the Icon component can be used freely inside it — a parameter called Icon shadowed the component type, turning <Icon> into the slot rather than the icon (#300). |
| ChildContent | RenderFragment? | — | Extra content rendered after Description — e.g. a link or list of details. |
| Class | string? | — | Additional CSS classes merged onto the root div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root div. |
Related Components
- Feature Grid — Responsive grid that lays out FeatureItem children
- Hero — Opening band that typically precedes a feature section
- Bento — Asymmetric grid layout for richer feature showcases