---
title: Feature with Numbered Marker
description: Replace the auto-generated icon chip with a numbered step indicator using iconSlot.
visibility: guest
draft: false
related:
  - /components/feature
  - /components/badge
  - /components/avatar
---

# Feature with Numbered Marker

When a feature card represents a step in a sequence (onboarding, "How it works", multi-stage flow), an auto-icon misses the point — the user needs to know **which step**. The `iconSlot` named slot replaces the icon chip with anything you supply: numbered step, custom illustration, third-party icon, etc.

## Recipe

:::preview{title="Numbered onboarding steps"}
<x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg">
    <x-wirekit::feature title="Connect your data">
        <x-slot:iconSlot>
            <x-wirekit::step-marker intent="primary">01</x-wirekit::step-marker>
        </x-slot:iconSlot>
        Pull rows from your warehouse — no ETL.
    </x-wirekit::feature>
    <x-wirekit::feature title="Define dashboards">
        <x-slot:iconSlot>
            <x-wirekit::step-marker intent="primary">02</x-wirekit::step-marker>
        </x-slot:iconSlot>
        Compose KPI cards via stat + ticker primitives.
    </x-wirekit::feature>
    <x-wirekit::feature title="Share with your team">
        <x-slot:iconSlot>
            <x-wirekit::step-marker intent="primary">03</x-wirekit::step-marker>
        </x-slot:iconSlot>
        One-click invite, role-based access, audit log.
    </x-wirekit::feature>
</x-wirekit::feature-grid>
:::

:::source{language="blade"}
<x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg">
    @foreach($steps as $i => $step)
        <x-wirekit::feature :title="$step['title']">
            <x-slot:iconSlot>
                <x-wirekit::step-marker intent="primary">
                    {{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}
                </x-wirekit::step-marker>
            </x-slot:iconSlot>
            {{ $step['description'] }}
        </x-wirekit::feature>
    @endforeach
</x-wirekit::feature-grid>
:::

## Variations

- **Custom illustrations:** Drop a `<svg>` or `<img>` directly into `iconSlot` for branded marker visuals.
- **Status indicators:** Use a colored badge (e.g. green check, red x) for "completed step" / "blocked step" semantics.
- **Tone-aware backgrounds:** Match the marker background to the feature's intended emotional tone via `var(--color-wk-success)` / `var(--color-wk-warning)` / etc.

## Components Used

- [Feature Grid](/components/feature-grid) — responsive container
- [Feature](/components/feature) — named `iconSlot` replaces auto chip
- [Step Marker](/components/step-marker) — the numbered chip itself, with `intent` and `size` props

## See Also

- [Feature component docs](/components/feature) — full tone + size + slot reference