Neura UI

Loading…

Logo
Neura UI
All pages 108

Hover Card

A card of details over a link or a name, on hover and on focus.

Basic Usage

Put the trigger in the trigger slot and the card in the body. It opens after a short delay, stays open while the pointer is on the trigger or the card, and opens on keyboard focus too. The card moves to the body, so it can sit inside a sentence.
blade

Lead #A-1042 was assigned to Demo Advertiser by Lena Ortiz on 6 November. 

<neura::hover-card>
    <x-slot:trigger><a href="/advertisers/12">Demo Advertiser</a></x-slot:trigger>

    <neura::hover-card.header title="Demo Advertiser" subtitle="Advertiser" initials="DA" color="rose">
        <x-slot:aside><neura::badge color="green" variant="soft">Active</neura::badge></x-slot:aside>
    </neura::hover-card.header>

    <neura::hover-card.stats>
        <neura::hover-card.stat label="Campaigns" value="12" />
        <neura::hover-card.stat label="Leads" value="3 140" />
        <neura::hover-card.stat label="Budget" value="48 k€" />
    </neura::hover-card.stats>

    <neura::hover-card.footer>
        <neura::button size="sm" variant="dark">Open</neura::button>
        <neura::button size="sm" variant="outline">Message</neura::button>
    </neura::hover-card.footer>
</neura::hover-card>

Configuration

Defaults live in config/neura-kit.php, like the other components. A prop on the tag wins over them.
php 
'hover-card' => Config::hoverCard([
    'default' => [
        'size' => 'md',             // sm | md | lg: width and padding (pack: HoverCard\Size)
        'rounded' => 'global',
        'shadow' => 'lg',
        'position' => 'bottom-start',
        'delay' => 300,             // ms before it opens
        'closeDelay' => 150,        // ms to reach the card
    ],
]),
'hover-card' => Config::hoverCard([
    'default' => [
        'size' => 'md',             // sm | md | lg: width and padding (pack: HoverCard\Size)
        'rounded' => 'global',
        'shadow' => 'lg',
        'position' => 'bottom-start',
        'delay' => 300,             // ms before it opens
        'closeDelay' => 150,        // ms to reach the card
    ],
]),

Props

Prop Type Default Description
trigger slot What opens the card
position string config: bottom-start top|right|bottom|left, with -start or -end
offset int 8 Distance from the trigger, in pixels
delay / closeDelay int config: 300 / 150 Wait before opening, and before closing
size / rounded / shadow string config From config(neura-kit.hover-card)
disabled boolean false Never open
hover-card.header title, subtitle, initials, src, color, circle Avatar and titles, with an aside slot
hover-card.stats / stat columns / label, value 3 A row of figures
hover-card.footer slot Actions sharing the width