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

<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>
                <span class="inline-flex items-center justify-center w-10 h-10 rounded-[var(--radius-wk-md)] bg-[var(--color-wk-accent)] text-[var(--color-wk-accent-fg)] font-semibold text-sm">
                    {{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}
                </span>
            </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 — responsive container
• Feature — named iconSlot replaces auto chip

#See Also

• Feature component docs — full tone + size + slot reference