Feature

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

Basic Usage

Basic feature card

Fast

Built for speed and optimal performance out of the box.

<x-wirekit::feature title="Fast">
    Built for speed and optimal performance out of the box.
</x-wirekit::feature>

With Icon

Feature with icon

Production Ready

Battle-tested components for your next Laravel project.

<x-wirekit::feature icon="check" title="Production Ready">
    Battle-tested components for your next Laravel project.
</x-wirekit::feature>

Multiple Features

For grid layouts, pair with the Feature Grid component:

Features in a grid

Easy Setup

Install and start building in minutes.

Accessible

WCAG-compliant keyboard and screen reader support.

No Lock-in

Eject or customize anytime.

<x-wirekit::feature-grid cols="1 sm:3">
    <x-wirekit::feature icon="edit" title="Easy Setup">Install and start building in minutes.</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">Eject or customize anytime.</x-wirekit::feature>
</x-wirekit::feature-grid>

The icon-chip background and foreground are controlled by the tone prop. All non-accent/neutral tones use color-mix(in srgb, …, 12%, --color-wk-bg) so the chip stays subtle on both light and dark surfaces.

All six feature tones

Accent

High-emphasis primary surface.

Neutral

Calm, background-tinted chip.

Soft

Subtle accent 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" tone="accent" title="Accent">High-emphasis primary surface.</x-wirekit::feature>
    <x-wirekit::feature icon="cube" tone="neutral" title="Neutral">Calm, background-tinted chip.</x-wirekit::feature>
    <x-wirekit::feature icon="sparkles" tone="soft" title="Soft">Subtle accent tint, no full-saturation block.</x-wirekit::feature>
    <x-wirekit::feature icon="check" tone="success" title="Success">Positive state.</x-wirekit::feature>
    <x-wirekit::feature icon="warning" tone="warning" title="Warning">Caution state.</x-wirekit::feature>
    <x-wirekit::feature icon="danger" tone="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
`icon`	string\|null	`null`	Icon name rendered inside the auto-generated chip. Ignored when `iconSlot` is supplied.
`title`	string\|null	`null`	Feature heading (`<h3>`)
`tone`	string	`'accent'`	Chip color: `accent`, `neutral`, `soft`, `success`, `warning`, `danger`. Override the project-wide default via `wirekit.components.feature.tone`.
`size`	string	`'md'`	Chip size: `sm` (w-8), `md` (w-10), `lg` (w-12), `xl` (w-16, 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 docs/animations.md 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`	`tone="accent"` chip background + text
`--color-wk-success` / `--color-wk-success-text`	`tone="success"` chip
`--color-wk-warning` / `--color-wk-warning-text`	`tone="warning"` chip
`--color-wk-danger` / `--color-wk-danger-text`	`tone="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 per `iconShape` prop

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.