Card

Card component.

Card, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->card()
    ->block('block', 'classes');

# Basic Usage

TallStackUI

<x-card>
    TallStackUI
</x-card>

# Header Slot

Header

Body

<x-card>
    <x-slot:header>
        Raw HTML content
    </x-slot:header>
    TallStackUI
</x-card>
 
<!-- or -->
 
<x-card header="TallStackUI">
    TallStackUI
</x-card>

# Footer Slot

Body

Footer

<x-card>
    TallStackUI
    <x-slot:footer>
        Raw HTML content
    </x-slot:footer>
</x-card>
 
<!-- or -->
 
<x-card footer="TallStackUI">
    TallStackUI
</x-card>

# Minimizable

TallStackUI

Minimize

<x-card header="TallStackUI" minimize>
    TallStackUI
</x-card>
 
<!-- or -->
 
<x-card minimize>
    <x-slot:header>
        TallStackUI
    </x-slot:header>
    TallStackUI
</x-card>

Since the icon is positioned in the header, you need to define a header to use minimize.

You can also mount as minimized:

TallStackUI

Initialized as minimized

<x-card header="TallStackUI" minimize="mount">
    TallStackUI
</x-card>

# Image

Image at top

Image at bottom

<!-- Top position -->
<x-card image="https://picsum.photos/750/300">
    TallStackUI
</x-card>
 
<!-- Bottom position -->
<x-card position="bottom" image="https://picsum.photos/750/300">
    TallStackUI
</x-card>

# Color Variations

TallStackUI

Normal

TallStackUI

Normal, Light

TallStackUI

Bordered

<!-- Accepted colors: primary, secondary, and ANY other TailwindCSS color. -->
 
<!-- Normal -->
<x-card header="TallStackUI" color="primary">
    TallStackUI
</x-card>
 
<!-- Light Variation -->
<x-card header="TallStackUI" color="primary" light>
    TallStackUI
</x-card>
 
<!-- Border Only -->
<x-card header="TallStackUI" color="primary" bordered>
    TallStackUI
</x-card>

Just like the minimizeable option, the colors are only applied when the Card has a header.

# Loading

An option to set the card in a loading state.

Loading Effect

<x-card loading>
    TallStackUI
</x-card>
 
<!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
 
<x-card loading="save" delay="longest">
    TallStackUI
</x-card>

Even if you use the header slot to set a raw HTML content the loading effect will be visible

# Events

An option to listen to events when the card state changes.

TallStackUI

<x-card header="TallStackUI" minimize
        x-on:minimize="alert('Minimized!')"
        x-on:maximize="alert('Maximized!')"
        x-on:close="alert('Closed!')">
    TallStackUI
</x-card>