Cards are a popular choice for organizing and displaying content within a confined container, effectively
isolating and highlighting a specific subject or topic. They offer a structured framework for presenting
information and can seamlessly incorporate interactive elements such as menus or buttons, providing users with a
cohesive and engaging experience.
The utilization of cards contributes to the overall user-friendliness of a web page or application. They
facilitate a clean and organized layout, making it easier for users to read, scan, and scroll through the
content. Cards can be employed to present a wide range of information, including articles, product listings,
user profiles, or any other content that benefits from a visually appealing and compartmentalized presentation.
You can use the card component in a straightforward manner by simply providing the content, and optionally, including a title. By default, the card includes borders, but these can be easily removed if you prefer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
1<x-card> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus. 3 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 4</x-card> 5 6<x-card title="Lorem Ipsum is simply!"> 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus. 8 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 9</x-card>10 11<x-card title="Lorem Ipsum is simply!" borderless>12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.13 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.14</x-card>In the card component, you have the flexibility to customize various slots. You can use the default slot for your content and apply custom classes as needed. The title can also be supplied as a slot. Furthermore, there are dedicated slots available: one for adding an action button to the header, and another for the footer, allowing you to include any additional elements or action buttons as desired.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque
dapibus. Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
1<x-card title="Lorem Ipsum is simply!"> 2 <x-slot name="slot" class="!text-rose-500"> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque 4 dapibus. Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 5 </x-slot> 6</x-card> 7 8<x-card> 9 <x-slot name="title" class="italic !font-bold">10 Lorem Ipsum is simply!11 </x-slot>12 13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.14 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.15</x-card>16 17<x-card title="Lorem Ipsum is simply!">18 <x-slot name="action">19 <x-mini-button icon="ellipsis-vertical" icon-size="md" primary flat xs />20 </x-slot>21 22 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.23 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.24</x-card>25 26<x-card title="Lorem Ipsum is simply!" rounded="3xl">27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.28 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.29 30 <x-slot name="footer" class="flex items-center justify-between">31 <x-button label="Delete" flat />32 33 <x-button label="Save" primary />34 </x-slot>35</x-card>We offer a range of padding options to accommodate various scenarios, allowing you to customize them according to your specific preferences.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
1{{-- CSS: 'p-0' --}} 2<x-card title="Lorem Ipsum is simply!" padding="none"> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus. 4 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 5</x-card> 6 7{{-- CSS: 'px-1 py-3 md:px-2' --}} 8<x-card title="Lorem Ipsum is simply!" padding="small"> 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.10 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.11</x-card>12 13{{-- CSS: 'px-2 py-5 md:px-4' - DEFAULT --}}14<x-card title="Lorem Ipsum is simply!" padding="medium">15 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.16 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.17</x-card>18 19{{-- CSS: 'px-3 py-6 md:px-5' --}}20<x-card title="Lorem Ipsum is simply!" padding="large">21 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.22 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.23</x-card>24 25{{-- Or Custom --}}26<x-card title="Lorem Ipsum is simply!" padding="px-8 py-2">27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.28 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.29</x-card>The card component now offers a wide range of rounding customizations. You have access to all of Tailwind's options or the flexibility to create your own custom styles.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-card title="Lorem Ipsum is simply!" squared> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus. 4 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 5</x-card> 6 7{{-- CSS: 'rounded-sm' --}} 8<x-card title="Lorem Ipsum is simply!" rounded="sm"> 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.10 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.11</x-card>12 13{{-- CSS: 'rounded' - DEFAULT --}}14<x-card title="Lorem Ipsum is simply!" rounded="base">15 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.16 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.17</x-card>18 19{{-- CSS: 'rounded-md' --}}20<x-card title="Lorem Ipsum is simply!" rounded="md">21 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.22 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.23</x-card>24 25{{-- CSS: 'rounded-lg' --}}26<x-card title="Lorem Ipsum is simply!" rounded="lg">27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.28 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.29</x-card>30 31{{-- CSS: 'rounded-xl' --}}32<x-card title="Lorem Ipsum is simply!" rounded="xl">33 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.34 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.35</x-card>36 37{{-- CSS: 'rounded-2xl' --}}38<x-card title="Lorem Ipsum is simply!" rounded="2xl">39 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.40 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.41</x-card>42 43{{-- CSS: 'rounded-3xl' --}}44<x-card title="Lorem Ipsum is simply!" rounded="3xl">45 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.46 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.47</x-card>The same applies to shadows. You can utilize all Tailwind options, and we also welcome customizable shadow values.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
Lorem Ipsum is simply!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
1{{-- CSS: 'shadow-none' - You can use |shadowless| too --}} 2<x-card title="Lorem Ipsum is simply!" shadow="none"> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus. 4 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida. 5</x-card> 6 7{{-- CSS: 'shadow-sm' --}} 8<x-card title="Lorem Ipsum is simply!" shadow="sm"> 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.10 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.11</x-card>12 13{{-- CSS: 'shadow' - DEFAULT --}}14<x-card title="Lorem Ipsum is simply!" shadow="base">15 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.16 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.17</x-card>18 19{{-- CSS: 'shadow-md' --}}20<x-card title="Lorem Ipsum is simply!" shadow="md">21 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.22 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.23</x-card>24 25{{-- CSS: 'shadow-lg' --}}26<x-card title="Lorem Ipsum is simply!" shadow="lg">27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.28 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.29</x-card>30 31{{-- CSS: 'shadow-xl' --}}32<x-card title="Lorem Ipsum is simply!" shadow="xl">33 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.34 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.35</x-card>36 37{{-- CSS: 'shadow-2xl' --}}38<x-card title="Lorem Ipsum is simply!" shadow="2xl">39 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.40 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.41</x-card>42 43{{-- CSS: 'shadow-inner' --}}44<x-card title="Lorem Ipsum is simply!" shadow="inner">45 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.46 Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.47</x-card>