Card

Card component.

Card, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::personalize()
    ->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">
    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.