card

A surface grouping related content, with an optional header and footer. Never nest cards.

Example

Connector health

Last 24 hours

Card content.
Updated 4 minutes ago

Laravel

<x-admin::card title="Connector health" description="Last 24 hours">
    <x-slot:actions><x-admin::button size="sm">Refresh</x-admin::button></x-slot:actions>
    Card content.
    <x-slot:footer>Updated 4 minutes ago</x-slot:footer>
</x-admin::card>

Props

PropRequiredDefaultOptions
titlenull
descriptionnull
flushfalse

Slots: actions, footer

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

Other stacks

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

HTML, for any stack
<section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Connector health</h2>                <p class="adm-card__description">Last 24 hours</p>            </div>
            <div class="adm-row"><button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" >Refresh</button></div>        </div>
        <div class="adm-card__content">Card content.</div>
            <div class="adm-card__footer">Updated 4 minutes ago</div>
    </section>