---
title: Feature Grids
description: Showcase your product's capabilities with icon-driven feature cards. Available in 3-column grid and alternating screenshot layouts.
visibility: guest
draft: false
---

# Feature Grids

Showcase your product's capabilities with icon-driven feature cards. Available in 3-column grid and alternating screenshot layouts.

**Composed from:** `aspect-ratio`, `button`, `container`, `feature`, `feature-grid`, `grid`, `heading`, `section`, `stack`, `text`.

## 3-Column with Icons

The classic feature grid — icon, heading, description per feature. Three columns work for 3-9 features; below 3 the grid feels sparse, above 9 the page goes on too long.

:::preview{title="Feature Grid — 3-Column" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="xl">
            <x-wirekit::stack gap="sm" align="center" style="text-align: center; max-width: 32rem; margin: 0 auto;">
                <x-wirekit::heading level="2" size="3xl">What WireKit covers</x-wirekit::heading>
                <x-wirekit::text size="lg" intent="muted">Each of these comes in the one Composer package.</x-wirekit::text>
            </x-wirekit::stack>
            <x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg">
                <x-wirekit::feature icon="check" title="Forms, overlays, tables" intent="primary">
                    Fields, dialogs, menus, data tables and navigation, each one a Blade component.
                </x-wirekit::feature>
                <x-wirekit::feature icon="eye" title="Dark Mode" intent="primary">
                    Every component reads its colors from CSS variables, and one class on the page switches them to dark.
                </x-wirekit::feature>
                <x-wirekit::feature icon="info" title="Keyboard and screen reader" intent="primary">
                    Arrow keys, Escape and Tab work as the ARIA patterns describe, and the focus returns to where it came from.
                </x-wirekit::feature>
                <x-wirekit::feature icon="edit" title="Customizable" intent="primary">
                    Four levels of customization, from CSS-variable overrides to full view publishing.
                </x-wirekit::feature>
                <x-wirekit::feature icon="upload" title="Livewire native" intent="primary">
                    Fields bind with wire:model and show the errors your validation returns.
                </x-wirekit::feature>
                <x-wirekit::feature icon="download" title="MIT licensed" intent="primary">
                    Free and open source, for personal and commercial projects.
                </x-wirekit::feature>
            </x-wirekit::feature-grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Alternating Screenshots

Features shown as alternating text + screenshot rows — best for detailed product walkthroughs where each feature deserves its own visual.

:::preview{title="Features — Alternating Screenshots" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="2xl">
            {{-- Each feature row uses a 1/2-col grid so it stacks on mobile.
                 DOM order is image-then-text on every row, so mobile gives a
                 consistent image→text rhythm (the canonical marketing pattern:
                 the visual draws attention, the explanation reads below). On
                 desktop the alternating image-left/right rhythm is preserved
                 by flipping the SECOND row's image to grid column 2 via
                 `md:order-2` on the image cell. --}}
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9">
                    <img src="/placeholder/640x360?bg=e0f2fe&fg=0369a1&label=Screenshot+%C2%B7+tables" alt="Screenshot · tables" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Data tables</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Sort, filter, and paginate with built-in WireKit components. Add sticky headers, captions, and row selection.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9" class="md:order-2">
                    <img src="/placeholder/640x360?bg=fce7f3&fg=be185d&label=Screenshot+%C2%B7+forms" alt="Screenshot · forms" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Accessible form fields</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Date pickers, comboboxes, file uploads and one-time codes, each showing its own validation error.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
            <x-wirekit::grid cols="1 md:2" align="center" gap="xl">
                <x-wirekit::aspect-ratio ratio="16/9">
                    <img src="/placeholder/640x360?bg=ede9fe&fg=6d28d9&label=Screenshot+%C2%B7+overlays" alt="Screenshot · overlays" style="width: 100%; height: 100%; border-radius: var(--radius-wk-xl); object-fit: cover;" />
                </x-wirekit::aspect-ratio>
                <x-wirekit::stack gap="md">
                    <x-wirekit::heading level="3" size="2xl">Overlay system</x-wirekit::heading>
                    <x-wirekit::text size="lg" intent="muted">Modals, drawers, dropdowns, command palettes — with focus trapping, scroll lock, and keyboard navigation handled for you.</x-wirekit::text>
                    <div>
                        <x-wirekit::button intent="neutral" surface="outline">Learn more</x-wirekit::button>
                    </div>
                </x-wirekit::stack>
            </x-wirekit::grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Related

- [Hero Sections](/blueprints/partials/hero) — page headers