Lumeo

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 />

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.

Accessible

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

Learn more

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