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

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

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

# Round

An option to control the border radius of the card wrapper.

Default (rounded-lg)
round flag — preserves the default
round="xs"
round="sm"
round="md"
round="lg"
round="xl"
round="2xl" 
{{-- Default radius (rounded-lg). --}}
<x-card>
    TallStackUI
</x-card>
 
{{-- Bare flag preserves the default radius. --}}
<x-card round>
    TallStackUI
</x-card>
 
<!-- Accepted sizes: xs, sm, md, lg, xl, 2xl -->
 
<x-card round="xs">
    TallStackUI
</x-card>
 
<x-card round="sm">
    TallStackUI
</x-card>
 
<x-card round="md">
    TallStackUI
</x-card>
 
<x-card round="lg">
    TallStackUI
</x-card>
 
<x-card round="xl">
    TallStackUI
</x-card>
 
<x-card round="2xl">
    TallStackUI
</x-card>
When omitted or used as a bare flag, round keeps the historical default (rounded-lg ). Pass a size between xs and 2xl to override the wrapper radius.

# 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
TallStackUI 
<x-card header="TallStackUI" minimize
        x-on:minimize="alert('Minimized!')"
        x-on:maximize="alert('Maximized!')"
        x-on:close="alert('Closed!')">
    TallStackUI
</x-card>

Code highlighting provided by Torchlight