---
title: Feature
description: Individual feature card for feature grids
visibility: guest
draft: false
---

# Feature

Individual feature card displaying an icon, title, and description. Designed for use within a [Feature Grid](/components/feature-grid).

## Basic Usage

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

## With Icon

:::preview{title="Feature with icon"}
<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:

:::preview{title="Features in a grid"}
<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>
:::

## Tones

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.

:::preview{title="All six feature tones"}
<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):

:::preview{title="Four feature sizes"}
<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.

:::preview{title="Numbered step in place of the auto-chip"}
<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](../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](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.