TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Card

Card component.

# 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>
You can set the default round for every card in the configuration file. The inline attribute always wins, so round="sm" on a single card overrides the configured value.

# Color Variations

TallStackUI
Normal
TallStackUI
Normal, Light
TallStackUI
Accent 
<!-- 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>
 
<!-- Colored top border instead of a filled header -->
<x-card header="TallStackUI" color="primary" accent>
    TallStackUI
</x-card>
Just like the minimizeable option, the colors are only applied when the Card has a header.

bordered became accent

On v3 this variation was called bordered . That name now belongs to the wrapper border below, so combining color with a colored top border is accent .

# Flat Look
NEW

shadowless
bordered
shadowless bordered 
<x-card shadowless>
    TallStackUI
</x-card>
 
<x-card bordered>
    TallStackUI
</x-card>
 
<x-card shadowless bordered>
    TallStackUI
</x-card>

# Paddingless
NEW

Card without padding in the body
TallStackUI 
<x-card header="Card without padding in the body" paddingless>
    TallStackUI
</x-card>

# Footer Alignment
NEW

TallStackUI 
<x-card>
    TallStackUI
    <x-slot:footer between>
        <x-button color="red">Delete</x-button>
        <x-button>Save</x-button>
    </x-slot:footer>
</x-card>
 
<!-- Accepted: start, center, end, between, unwrapped -->
Attribute Result
(none) justify-end
start justify-start
center justify-center
end justify-end, written out
between justify-between
unwrapped no aligning wrapper at all

# Skeleton
NEW

An option to display a lazy loading skeleton indicator. 

<!-- Bare flag: 3 body lines -->
<x-card skeleton />
 
<!-- An integer sets the count -->
<x-card skeleton="5" header="TallStackUI" footer image round="xl" />

Example of usage using placeholder() of a #[Lazy] component: 

#[Lazy]
class Metrics extends Component
{
    public function placeholder(): string
    {
        return <<<'HTML'
        <div>
            <x-card skeleton="5" />
        </div>
        HTML;
    }
}

# 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>
Event Detail Fired when
minimize — The card is minimized
maximize — The card is restored
close — The card is closed

Code highlighting provided by Torchlight