Feature

Individual feature card displaying an icon, title, and description. Designed for use within a Feature Grid.

Basic Usage

Basic feature card

Server-Rendered

Blade renders the markup on the server, and Alpine adds the behavior.

<x-wirekit::feature title="Server-Rendered">
    Blade renders the markup on the server, and Alpine adds the behavior.
</x-wirekit::feature>

With Icon

Feature with icon

Dark Mode

One class on the root element switches every component.

<x-wirekit::feature icon="check" title="Dark Mode">
    One class on the root element switches every component.
</x-wirekit::feature>

Multiple Features

For grid layouts, pair with the Feature Grid component:

Features in a grid

Easy Setup

Install the package and start building.

Accessible

WCAG-compliant keyboard and screen reader support.

No Lock-in

Publish the views and change any of them.

<x-wirekit::feature-grid cols="1 sm:3">
    <x-wirekit::feature icon="edit" title="Easy Setup">Install the package and start building.</x-wirekit::feature>
    <x-wirekit::feature icon="check" title="Accessible">WCAG-compliant keyboard and screen reader support.</x-wirekit::feature>
    <x-wirekit::feature icon="close" title="No Lock-in">Publish the views and change any of them.</x-wirekit::feature>
</x-wirekit::feature-grid>

The icon-chip background and foreground follow the intent prop. primary fills the chip with the accent color and neutral uses the muted background; the other four tint it with color-mix(in srgb, …, 12%, --color-wk-bg), so the chip stays subtle on both light and dark surfaces. info is that tint in --color-wk-info-tone, the accent until you give info a color of its own.

All six feature intents

Primary

High-emphasis primary surface.

Neutral

Calm, background-tinted chip.

Info

Subtle info tint, no full-saturation block.

Success

Positive state.

Warning

Caution state.

Danger

Critical state.

<x-wirekit::feature-grid cols="1 sm:2 lg:3">
    <x-wirekit::feature icon="bolt" intent="primary" title="Primary">High-emphasis primary surface.</x-wirekit::feature>
    <x-wirekit::feature icon="cube" intent="neutral" title="Neutral">Calm, background-tinted chip.</x-wirekit::feature>
    <x-wirekit::feature icon="sparkles" intent="info" title="Info">Subtle info tint, no full-saturation block.</x-wirekit::feature>
    <x-wirekit::feature icon="check" intent="success" title="Success">Positive state.</x-wirekit::feature>
    <x-wirekit::feature icon="warning" intent="warning" title="Warning">Caution state.</x-wirekit::feature>
    <x-wirekit::feature icon="danger" intent="danger" title="Danger">Critical state.</x-wirekit::feature>
</x-wirekit::feature-grid>

Sizes

The chip and its inner icon scale together. Four sizes are available — xl is for hero-row features (64×64 chip with a 32×32 inner icon):

Four feature sizes

Small

w-8 chip, h-4 icon.

Medium

w-10 chip, h-5 icon (default).

Large

w-12 chip, h-6 icon.

Hero-row

w-16 chip, h-8 icon.

<x-wirekit::feature-grid cols="1 sm:4">
    <x-wirekit::feature icon="bolt" size="sm" title="Small">w-8 chip, h-4 icon.</x-wirekit::feature>
    <x-wirekit::feature icon="bolt" size="md" title="Medium">w-10 chip, h-5 icon (default).</x-wirekit::feature>
    <x-wirekit::feature icon="bolt" size="lg" title="Large">w-12 chip, h-6 icon.</x-wirekit::feature>
    <x-wirekit::feature icon="bolt" size="xl" title="Hero-row">w-16 chip, h-8 icon.</x-wirekit::feature>
</x-wirekit::feature-grid>

Custom Icon Marker

When the auto-generated icon chip isn't enough — e.g. you want a numbered step, a custom illustration, or a third-party icon — supply an iconSlot. The default chip is suppressed entirely.

Numbered step in place of the auto-chip

Connect your data

Pull rows straight from your warehouse — no ETL job required.

<x-wirekit::feature title="Connect your data">
    <x-slot:iconSlot>
        <span style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-wk-md); background: var(--color-wk-accent); color: var(--color-wk-accent-fg); font-weight: 600; font-size: 0.875rem;">01</span>
    </x-slot:iconSlot>
    Pull rows straight from your warehouse — no ETL job required.
</x-wirekit::feature>

Props

Prop	Type	Default	Description
`level`	int	`3`	Heading level for the title, 1–6. The default is what it has always rendered — a card in a grid of features — so nothing moves unless you set it. Set it to match the surrounding outline: a skipped level is what `heading-order` reports, and that rule sits in axe's best-practice tag rather than the WCAG tags most suites run, so it is invisible to an axe sweep and visible in Lighthouse.
`icon`	string\|null	`null`	Icon name rendered inside the auto-generated chip. Ignored when `iconSlot` is supplied.
`title`	string\|null	`null`	Feature heading. The element is whatever `level` says — `<h3>` by default
`intent`	string\|null	`null`	Chip color on the kit's canonical axis — the name `button`, `badge`, `alert` and `callout` use: `primary`, `neutral`, `info`, `success`, `warning`, `danger`, plus the two older names: `accent`, the same as `primary`, and `soft`, a tint of the accent that no canonical value names. Unset, it falls back to `tone`.
`tone`	string	`'accent'`	The back-compat alias of `intent`, over the same values: `accent`, `neutral`, `soft`, `success`, `warning`, `danger`, with `primary` resolving to `accent`; `info` is a tint of its own. Kept for the whole of v2; `intent` wins when a call site sets both. Override the project-wide default via `wirekit.components.feature.tone`.
`size`	string	`'md'`	Chip size, on the component heights: `sm` (`--size-wk-sm`, 2rem), `md` (`--size-wk-md`, 2.5rem), `lg` (`--size-wk-lg`, 3rem), and `xl` at a fixed 4rem for a hero row. Icon size scales with the chip. Override via `wirekit.components.feature.size`.
`animateIn`	string\|null	`null`	Entrance-reveal preset (e.g. `'fade'`, `'slide-up'`, `'scale-in'`) — inline alternative to wrapping in `<x-wirekit::reveal>`. See Animations for the full preset list. Respects `prefers-reduced-motion: reduce`.
`scope`	string\|null	`null`	Scoped personalization name

Slots

Slot	Description
default	Feature description text
`iconSlot`	Custom marker that replaces the auto-generated icon chip (suppresses the `icon` prop).

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

Don't combine iconSlot AND icon. When both are present, iconSlot wins — the icon prop is silently ignored. Pass only one.

Design Tokens

Token	Used for
`--font-wk-heading-weight`	Title weight
`--text-wk-sm` / `--text-wk-lg`	Description / title font size
`--color-wk-text`	Title text
`--color-wk-text-muted`	Description text
`--color-wk-bg` / `--color-wk-bg-muted`	Icon-chip background
`--color-wk-accent` / `--color-wk-accent-fg`	`intent="primary"` chip background + text
`--color-wk-info-tone` / `--color-wk-info-text`	`intent="info"` chip tint + text
`--color-wk-success` / `--color-wk-success-text`	`intent="success"` chip
`--color-wk-warning` / `--color-wk-warning-text`	`intent="warning"` chip
`--color-wk-danger` / `--color-wk-danger-text`	`intent="danger"` chip
`--gap-wk-sm`	Icon-to-content gap
`--radius-wk-sm` / `--radius-wk-md` / `--radius-wk-lg` / `--radius-wk-xl`	Icon-chip border radius — one per `size`, matching the chip it rounds

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.