Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Cards

Cards... or are they boxes? Rectangles on a screen! Put stuff in them, love them like one of your own. Nest them in other cards, or put them in a grid, the choice is yours!

Using Cards

Use <ui:card> to create a card with the default variant, padding, and radius.

Basic Cards
Copied!
I'm a Happy Little Card 
1<ui:card>I'm a Happy Little Card</ui:card>
1<ui:card>I'm a Happy Little Card</ui:card>

Properties

Cards suppport the following properties:

Property Type Default Description
padding string | Size true The padding of the card.

Padding

Cards of all padding sizes -- sm, md (default), lg, and xl.

Card Sizing
Copied!
SM Sizing
Header
I'm a small card
Footer
MD Sizing
Header
I'm a medium card
Footer
LG Sizing
Header
I'm a large card
Footer
XL Sizing
Header
I'm an extralarge card
Footer 
 1<div>
 2    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">SM Sizing</h5>
 3    <ui:card padding="sm">
 4        <x-slot:header>Header</x-slot:header>
 5        I'm a small card
 6        <x-slot:footer>Footer</x-slot:footer>
 7    </ui:card>
 8</div>
 9 
10<div>
11    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">MD Sizing</h5>
12    <ui:card padding="md">
13        <x-slot:header>Header</x-slot:header>
14        I'm a medium card
15        <x-slot:footer>Footer</x-slot:footer>
16    </ui:card>
17</div>
18 
19<div>
20    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">LG Sizing</h5>
21    <ui:card padding="lg">
22        <x-slot:header>Header</x-slot:header>
23        I'm a large card
24        <x-slot:footer>Footer</x-slot:footer>
25    </ui:card>
26</div>
27 
28<div>
29    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">XL Sizing</h5>
30    <ui:card padding="xl">
31        <x-slot:header>Header</x-slot:header>
32        I'm an extralarge card
33        <x-slot:footer>Footer</x-slot:footer>
34    </ui:card>
35</div>
 1<div>
 2    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">SM Sizing</h5>
 3    <ui:card padding="sm">
 4        <x-slot:header>Header</x-slot:header>
 5        I'm a small card
 6        <x-slot:footer>Footer</x-slot:footer>
 7    </ui:card>
 8</div>
 9 
10<div>
11    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">MD Sizing</h5>
12    <ui:card padding="md">
13        <x-slot:header>Header</x-slot:header>
14        I'm a medium card
15        <x-slot:footer>Footer</x-slot:footer>
16    </ui:card>
17</div>
18 
19<div>
20    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">LG Sizing</h5>
21    <ui:card padding="lg">
22        <x-slot:header>Header</x-slot:header>
23        I'm a large card
24        <x-slot:footer>Footer</x-slot:footer>
25    </ui:card>
26</div>
27 
28<div>
29    <h5 class="text-center opacity-75 text-xs uppercase tracking-wide">XL Sizing</h5>
30    <ui:card padding="xl">
31        <x-slot:header>Header</x-slot:header>
32        I'm an extralarge card
33        <x-slot:footer>Footer</x-slot:footer>
34    </ui:card>
35</div>

Slots

Header & Footer

The ol' top-n-bottom.

Copied!
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer
Card with Header & Footer
This is a card with a header. It lives in our world.
Example Footer 
 1<ui:card>
 2    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
 3    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
 4    <x-slot:footer>Example Footer</x-slot:footer>
 5</ui:card>
 6 
 7<ui:card color="primary">
 8    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
 9    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
10    <x-slot:footer>Example Footer</x-slot:footer>
11</ui:card>
12 
13<ui:card color="secondary">
14    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
15    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
16    <x-slot:footer>Example Footer</x-slot:footer>
17</ui:card>
18 
19<ui:card color="success">
20    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
21    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
22    <x-slot:footer>Example Footer</x-slot:footer>
23</ui:card>
24 
25<ui:card color="warning">
26    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
27    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
28    <x-slot:footer>Example Footer</x-slot:footer>
29</ui:card>
30 
31<ui:card color="danger">
32    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
33    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
34    <x-slot:footer>Example Footer</x-slot:footer>
35</ui:card>
 1<ui:card>
 2    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
 3    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
 4    <x-slot:footer>Example Footer</x-slot:footer>
 5</ui:card>
 6 
 7<ui:card color="primary">
 8    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
 9    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
10    <x-slot:footer>Example Footer</x-slot:footer>
11</ui:card>
12 
13<ui:card color="secondary">
14    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
15    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
16    <x-slot:footer>Example Footer</x-slot:footer>
17</ui:card>
18 
19<ui:card color="success">
20    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
21    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
22    <x-slot:footer>Example Footer</x-slot:footer>
23</ui:card>
24 
25<ui:card color="warning">
26    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
27    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
28    <x-slot:footer>Example Footer</x-slot:footer>
29</ui:card>
30 
31<ui:card color="danger">
32    <x-slot:header>Card with Header &amp; Footer</x-slot:header>
33    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
34    <x-slot:footer>Example Footer</x-slot:footer>
35</ui:card>

Examples

Kitchen Sink

Copied!
Kitchen Sink
This is a card with a header. It lives in our world.
Example Footer 
1<ui:card radius="xl" size="lg" color="success" variant="solid">
2    <x-slot:header>Kitchen Sink</x-slot:header>
3    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
4    <x-slot:footer>Example Footer</x-slot:footer>
5</ui:card>
1<ui:card radius="xl" size="lg" color="success" variant="solid">
2    <x-slot:header>Kitchen Sink</x-slot:header>
3    <div class="my-4 text-base text-black/60 dark:text-white/60">This is a card with a header. It lives in our world.</div>
4    <x-slot:footer>Example Footer</x-slot:footer>
5</ui:card>
Like this project? Stop by the bear cave to stargaze.