columns · Admiral UI kit

Example

Owner: Admiral
Created: 6 Nov 2026
Refresh: Every hour
Members: 12,480

Build 42 is live.

Fields for the rule.

Laravel

<x-admin::stack>
    <x-admin::columns spans="8/4" equal id="g-columns">
        <x-admin::card title="Segment summary">
            <x-admin::dl :items="['Owner' => 'Admiral', 'Created' => '6 Nov 2026', 'Refresh' => 'Every hour', 'Members' => '12,480']" />
        </x-admin::card>
        <x-admin::card title="Active build">
            <x-slot:actions>
                <x-admin::dropdown label="Actions" id="g-columns-menu">
                    <x-admin::dropdown-item href="#">Rebuild now</x-admin::dropdown-item>
                    <x-admin::dropdown-item href="#">View build</x-admin::dropdown-item>
                    <x-admin::dropdown-item href="#">Field mappings</x-admin::dropdown-item>
                    <x-admin::dropdown-item href="#">Rebuild history</x-admin::dropdown-item>
                </x-admin::dropdown>
            </x-slot:actions>
            Build 42 is live.
        </x-admin::card>
    </x-admin::columns>
    <x-admin::columns spans="2:1" sticky="last" reverse stack-at="sm" id="g-columns-sticky">
        <x-admin::card title="Rule">Fields for the rule.</x-admin::card>
        <x-admin::card title="Save">
            <x-admin::toolbar><x-admin::button variant="primary">Create rule</x-admin::button><x-admin::button>Cancel</x-admin::button></x-admin::toolbar>
        </x-admin::card>
    </x-admin::columns>
</x-admin::stack>

Props

Prop	Default	Options
`spans`	`"1/1"`
`gap`	`"6"`
`equal`	`false`
`align`	`"start"`	start, center, end, stretch
`stack-at`	`"md"`	sm, md, lg, xl, never
`reverse`	`false`
`sticky`	`null`	first, last

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Columns } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack

<div class="adm-stack" style="gap:var(--ad-space-4)"><div style="--_cols:minmax(0,8fr) minmax(0,4fr);--_gap:var(--ad-space-6);--_align:start" class="adm-columns adm-columns--stack-md adm-columns--equal" id="g-columns">
    <div class="adm-columns__track"><section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Segment summary</h2>                            </div>
                    </div>
        <div class="adm-card__content"><dl class="adm-dl">
            <dt>Owner</dt>
        <dd>Admiral</dd>
            <dt>Created</dt>
        <dd>6 Nov 2026</dd>
            <dt>Refresh</dt>
        <dd>Every hour</dd>
            <dt>Members</dt>
        <dd>12,480</dd>
        
</dl></div>
    </section>
        <section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Active build</h2>                            </div>
            <div class="adm-row"><details class="adm-dropdown" id="g-columns-menu">
            <summary class="adm-btn adm-btn--secondary"><span class="adm-dropdown__label">Actions</span><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
        <div class="adm-menu"><a href="#" class="adm-menu__item">Rebuild now</a>
                    <a href="#" class="adm-menu__item">View build</a>
                    <a href="#" class="adm-menu__item">Field mappings</a>
                    <a href="#" class="adm-menu__item">Rebuild history</a></div>
</details></div>        </div>
        <div class="adm-card__content">Build 42 is live.</div>
    </section></div>
</div>
    <div style="--_cols:minmax(0,2fr) minmax(0,1fr);--_gap:var(--ad-space-6);--_align:start" class="adm-columns adm-columns--stack-sm adm-columns--reverse adm-columns--sticky-last" id="g-columns-sticky">
    <div class="adm-columns__track"><section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Rule</h2>                            </div>
                    </div>
        <div class="adm-card__content">Fields for the rule.</div>
    </section>
        <section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Save</h2>                            </div>
                    </div>
        <div class="adm-card__content"><div class="adm-toolbar" role="toolbar"><button type="button" class="adm-btn adm-btn--primary" >Create rule</button>
<button type="button" class="adm-btn adm-btn--secondary" >Cancel</button></div></div>
    </section></div>
</div></div>