WARNING! You are browsing the docs for an old version of TallStackUI!

Powerful suite of Blade components for TALL Stack apps.

Card

Card component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# 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.

Code highlighting provided by Torchlight