Documentation

Documentation

FeatureItem

Single inline feature row with an optional colored icon badge.

The <dsgn-feature-item> component renders one short feature line: an optional icon in a colored badge, followed by the label you slot in. It is an inline element built for lists of capabilities — in a hero’s features slot, or in the rows <dsgn-card> renders from its features property.

Usage

import { html } from 'lit';
import { check } from '@ds-gn/ui/icon/icons';

html`<dsgn-feature-item variant="success" .icon=${check}>
  Unlimited projects
</dsgn-feature-item>`;

Import the component module in your application entrypoint:

import '@ds-gn/ui/feature-item';

Props

Prop Type Default Description
variant 'default' | 'brand' | 'accent' | 'success' | 'warning' | 'error' 'default' Color of the icon badge.
surface 'light' | 'dark' 'light' Semantic token surface to use.
icon SVGTemplateResult undefined Icon as a Lit template. Property-only (no attribute). When omitted, no icon badge renders.

Slots

Slot Description
(default) Feature label.

The component has no icon, heading, or description slots. The label is the default slot, and the icon is set through the icon property.

Icons

icon takes a Lit template, so it can only be set from JavaScript. Import the icon you need and assign it — that keeps the bundle to the icons you actually use:

import { check } from '@ds-gn/ui/icon/icons';

document.querySelector('dsgn-feature-item').icon = check;

In a Lit template:

import { html } from 'lit';
import { check } from '@ds-gn/ui/icon/icons';

html`<dsgn-feature-item variant="success" .icon=${check}>
  Unlimited projects
</dsgn-feature-item>`;

Without an icon, the component renders the label alone. Because variant styles only the icon badge, every variant looks the same in that state.

Examples

Variants

import { html } from 'lit';
import { check } from '@ds-gn/ui/icon/icons';

html`
  <dsgn-feature-item variant="default" .icon=${check}>Default</dsgn-feature-item>
  <dsgn-feature-item variant="brand" .icon=${check}>Brand</dsgn-feature-item>
  <dsgn-feature-item variant="accent" .icon=${check}>Accent</dsgn-feature-item>
  <dsgn-feature-item variant="success" .icon=${check}>Success</dsgn-feature-item>
  <dsgn-feature-item variant="warning" .icon=${check}>Warning</dsgn-feature-item>
  <dsgn-feature-item variant="error" .icon=${check}>Error</dsgn-feature-item>
`;

A feature list

<dsgn-stack direction="vertical" gap="sm">
  <dsgn-feature-item>Sub-second builds</dsgn-feature-item>
  <dsgn-feature-item>Typed component APIs</dsgn-feature-item>
  <dsgn-feature-item>Composable adapters</dsgn-feature-item>
</dsgn-stack>

On a dark surface

<dsgn-feature-item surface="dark">Premium feature</dsgn-feature-item>

Accessibility

The icon badge is decorative — the slotted label carries the meaning, so keep the label descriptive on its own. Color alone should never be the only signal that separates one feature row from another.

Esc