v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

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