Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add data-card

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::data-card> presents one number and the context that makes it mean something: what it measures, how it moved, and its recent shape. Use it for the row of headline figures at the top of a dashboard.

For several metrics side by side, see Stats Card.

Basic Usage

Revenue
€21,929 +12.4% 
<div class="max-w-xs">
    <x-aura::data-card title="Revenue" value="€21,929" change="+12.4%" change-type="positive" />
</div>
<x-aura::data-card title="Revenue" value="€21,929" change="+12.4%" change-type="positive" />

Props

Prop Type Default Description
title string '' What the number measures.
value string '' The figure itself, already formatted.
change string|null null The movement, e.g. +12.4%.
changeType string 'neutral' positive, negative or neutral — drives the colour and the direction indicator.
icon string|null null Icon name shown beside the title.
sparkline array|null null Numbers to draw as a trend line.
href string|null null Makes the whole card a link to the detail view.

With a sparkline

Orders
188 -3.1% 
<div class="max-w-xs">
    <x-aura::data-card
        title="Orders"
        value="188"
        change="-3.1%"
        change-type="negative"
        :sparkline="[12, 18, 9, 22, 17, 25, 19, 14]"
    />
</div>
<x-aura::data-card
    title="Orders"
    value="188"
    change="-3.1%"
    change-type="negative"
    :sparkline="$orders->pluck('total')->all()"
/>

Notes

change-type is a judgement, not arithmetic: a fall in churn is positive. Set it from what the movement means for the reader, not from the sign of the number.