---
title: Card Stack
description: Named parts, such as the cards of a record page, drawn in an order the application remembers, with the parts a reader hid carried along hidden.
visibility: guest
draft: false
---

# Card Stack

`<x-wirekit::card-stack>` draws named parts, most often the cards of a record page, in an order the application remembers for a reader. A part the reader hid is carried along hidden rather than left out, and it shows again for the visit when a link leads into it.

## Basic Usage

Write each part as a named slot, and give `order` the names in the order to draw them. A name the order holds without a slot is skipped, and a slot the order does not name yet, a part added after the order was remembered, comes last.

:::preview{title="The cards of a product in a remembered order"}
<x-wirekit::card-stack :order="['prices', 'details', 'stock']">
    <x-slot:details>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Details</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">Name, brand and category.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:details>
    <x-slot:prices>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Prices</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">The price in each channel.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:prices>
    <x-slot:stock>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Stock</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">What each warehouse holds.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:stock>
</x-wirekit::card-stack>
:::

## Hidden Parts

An entry of `order` may be `['key' => name, 'shown' => false]`. That part is drawn with `hidden` rather than left out: a slot is rendered before the stack places it, and a Livewire component inside it would otherwise lose its element.

```blade
{{-- 1. The reader's order, with the stock card hidden. --}}
<x-wirekit::card-stack :order="[
    ['key' => 'details', 'shown' => true],
    ['key' => 'prices', 'shown' => true],
    ['key' => 'stock', 'shown' => false],
]">
    <x-slot:details>…</x-slot:details>
    <x-slot:prices>…</x-slot:prices>
    <x-slot:stock><livewire:stock-card :product="$product" /></x-slot:stock>
</x-wirekit::card-stack>
```

A hidden part shows for the visit in two ways, and stays shown when a Livewire render draws it hidden again, until the page is left:

- A link whose fragment leads to an element inside it, such as `<a href="#stock">Stock</a>` to a card with `id="stock"`, shows it on arrival and on every change of the fragment, and brings the element into view.
- `wirekit:card-stack-show` on `window` with the name of the part. Where a page holds two stacks with that part, `stack` names the stack's `id`.

```blade
{{-- 2. A button that shows the stock card. --}}
<x-wirekit::button x-on:click="$dispatch('wirekit:card-stack-show', { key: 'stock' })">Show stock</x-wirekit::button>
```

## Order on Screen and in the Document

Each part stands in a wrapper with no box of its own and a `wire:key`. A new order moves the parts instead of drawing them again, so a form in one keeps what was typed, and the order in the document is the order on screen, which is the order the keyboard and a screen reader follow.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `order` | array | `[]` | The parts in the order they are drawn: names, or `['key' => name, 'shown' => bool]` |
| `gap` | string | `md` | The space between the parts, as on [Stack](/components/stack) |
| `scope` | string\|null | `null` | Scoped personalization name |

## Accessibility

- A hidden part is hidden from everyone with `hidden`, the way the reader asked, and nothing of it is reached by the keyboard.
- The parts follow their order in the document, so the reading order is the visual one.

## Keyboard Interaction

The stack adds no keys. Its parts keep their own.