Card
Card component.
Card, Personalization Blocks
Example:
TallStackUi::personalize() ->card() ->block('block', 'classes');
TallStackUI
<x-card> TallStackUI</x-card>
Header
Body
<x-card> <x-slot:header> TallStackUI </x-slot:header> TallStackUI</x-card> <!-- or --> <x-card header="TallStackUI"> TallStackUI</x-card>
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 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>
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.