Cards
Cards are often used to display content in a container, restricting it to a single subject. Each card may also contain actions like menu or buttons.
Using cards makes the page easy to read, scan and scroll through.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
1<x-card>2 // code3</x-card>
Lorem Ipsum is simply!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
1<x-card title="Your title here">2 // code3</x-card>
Lorem Ipsum is simply!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
1<x-card title="Your title here">2 <x-slot name="action">3 <button class="rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600">4 <x-icon name="dots-vertical" class="w-4 h-4 text-gray-500" />5 </button>6 </x-slot>7 8 // code9</x-card>
Card Options
Options
Prop | Required | Default | Type |
---|---|---|---|
padding | false | px-2 py-5 md:px-4 | string |
shadow | false | shadow-md | string |
rounded | false | rounded-lg | string |
color | false | bg-white border border-gray-200 | string |
title | false | none | string |
cardClasses | false | none | string |
action | false | none | slot |
header | false | none | slot |
footer | false | none | slot |