item

A row in a settings or activity list.

Example

Salesforce Last synced 4 minutes ago Healthy
Google Sheets Quota exceeded Degraded

Laravel

<x-admin::item title="Salesforce" description="Last synced 4 minutes ago" icon="plug">
    <x-slot:actions><x-admin::badge variant="success" dot>Healthy</x-admin::badge></x-slot:actions>
</x-admin::item>
<x-admin::item title="Google Sheets" description="Quota exceeded" icon="plug" href="#">
    <x-slot:actions><x-admin::badge variant="warning" dot>Degraded</x-admin::badge></x-slot:actions>
</x-admin::item>

Props

PropRequiredDefaultOptions
titleyes
descriptionnull
iconnull
hrefnull

Slots: actions

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

Other stacks

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

HTML, for any stack
<div class="adm-item">
    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4"/></svg>    <span class="adm-item__text">
        <span class="adm-item__title">Salesforce</span>
        <span class="adm-item__description">Last synced 4 minutes ago</span>        
    </span>
    <span class="adm-row"><span class="adm-badge adm-badge--success adm-badge--dot">Healthy</span></span></div>
<a class="adm-item" href="#">
    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4"/></svg>    <span class="adm-item__text">
        <span class="adm-item__title">Google Sheets</span>
        <span class="adm-item__description">Quota exceeded</span>        
    </span>
    <span class="adm-row"><span class="adm-badge adm-badge--warning adm-badge--dot">Degraded</span></span></a>