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

Simple Card
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    // code
3</x-card>
Card Title

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    // code
3</x-card>
Card Action Slot

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    // code
9</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