v2.7.6
This component makes it easy to display content in a card layout. What you get by default is a very basic card. Considering different people have very different card needs, the content of the card is absolutely up to the user. We have however, made provision for some very specific card use cases. You can specify if the card has a header and a footer. There’s also contact cards which are very specific for displaying contact details. These options should take care of a lot of card needs.
This just gives you the card frame with the option to define a heading text or card title.
<x-bladewind::card>
// the card content goes here
</x-bladewind::card>
<x-bladewind::card title="recent activity">
// the card content goes here
</x-bladewind::card>
As explained earlier, the card component has been kept super simple because people have varying uses for cards and forcing specific layouts on them defeats the purpose of having a card component. Below are a few examples of how you can use the BladewindUI Card component for varying content types.
Below is an example of an invoice table sitting in a basic BladewindUI Card. The BladewindUI Table component was used in building the invoice.
| Item | Quantity | Price (USD) | |
|---|---|---|---|
| Airpods Max (Black) | 1 | 500.00 | |
| Macbook Pro M1 Pro 16 inch | 1 | 3,500.00 | |
| iPhone Lightning Charger | 2 | 100.00 | |
| iTunes Gift Card | 5 | 250.00 | |
| Total: | 4,350.00 | ||
<x-bladewind::card title="invoice details">
<x-bladewind.table striped="true">
<x-slot name="header">
<th>Item</th>
<th width="10%" class="text-center">Quantity</th>
<th width="20%" class="text-right">Price (USD)</th>
</x-slot>
<tr>
<td>Airpods Max (Black)</td>
<td class="text-center">1</td>
<td class="text-right">500.00</td>
</tr>
...
</x-bladewind.table>
</x-bladewind::card>
Below is an example of a grid-based navigation that uses cards for its menu items. The hover effect is achieved by adding additional TailwindUI classes to the class attribute of the card.
The icons used in the design below or anywhere else in our docs are from Heroicons.
<div class="grid grid-cols-3 gap-5">
<x-bladewind::card class="cursor-pointer hover:shadow-gray-300">
<svg ...>...</svg>
<span class="text-center ...">Projects</span>
</x-bladewind::card>
<x-bladewind::card class="cursor-pointer hover:shadow-gray-300">
<svg...>...</svg>
<span class="text-center ...">Tasks</span>
</x-bladewind::card>
<x-bladewind::card class="cursor-pointer hover:shadow-gray-300">
<svg...>...</svg>
<span class="text-center ...">Ideas</span>
</x-bladewind::card>
</div>
Below is an example of a contact list. This does not use the BladewindUI contact card component. Just a simple list of contacts with action icons.
<div class="grid grid-cols-2 gap-3">
<x-bladewind::card compact="true">
<div class="flex items-center">
<div>
<x-bladewind.avatar image="/path/to/the/image/file" />
</div>
<div class="grow pl-2 pt-1">
<b>Michael K. Ocansey</b>
<div class="text-sm">Senior Developer</div>
<div class="text-sm">Tech Team</div>
</div>
<div>
<a href="">
<svg>
...
</svg>
</a>
</div>
</div>
</x-bladewind::card>
<x-bladewind::card compact="true">
...
</x-bladewind::card>
<x-bladewind::card compact="true">
...
</x-bladewind::card>
<x-bladewind::card compact="true">
...
</x-bladewind::card>
</div>
This card component is very specific to rendering contacts. It is not useful for anything else. It saves you from having to manually build a contact card like we did in the earlier examples. A default avatar is used if one is not provided.
<x-bladewind.contact-card
name="Michael K. Ocansey"
mobile="+233.123.456.789"
image="/path/to/the/image/file"
position="Senior Copywriter"
email="mike@bladewindui.com"
birthday="01-May-2000" />
You can specify a header and footer for the card component. This is set up as a slot so there is really no restriction to what goes inside the header and footer.
Headers and footers are independent so you don't need to explicitly specify both. When the header slot is set, the main body of the card looses all its padding so you will need to style the card body as you wish. Lets try and create an Instagram-like card.
The image is from Unsplash and by Akindele Ibukun
<x-bladewind::card>
<x-slot:header>
<div class="flex px-4 pt-2 pb-3">
<x-bladewind.avatar
size="small"
image="/path/to/the/image/file" />
<div class="pl-2">
<span class="block...">mkocansey</span>
<span class="block...">Greater Accra, Accra</span>
</div>
</div>
</x-slot:header>
<img src="/path/to/the/image/file" />
<x-slot:footer>
<div class="flex justify-between p-4">
<div class="flex space-x-4">
<x-bladewind.icon name="heart" class="h-8 w-8..." />
<x-bladewind.icon name="chat-bubble-oval-left-ellipsis" class="h-8 w-8..." />
<x-bladewind.icon name="arrow-uturn-left" class="h-8 w-8..." />
</div>
<div>
<svg> ... </svg>
</div>
</div>
</x-slot:footer>
</x-bladewind::card>
The table below shows a comprehensive list of all the attributes available for the Card component.
| Option | Default | Available Values |
|---|---|---|
| title | blank | Any title provided will become the card heading |
| header | blank | Once a header slot is defined, the card splits into two uneven horizontal parts. The content of the header slot will be displayed first. |
| footer | blank | Once a footer slot is defined, the content of the slot gets fixed to the base of the card as a footer. |
| compact | false | This controls how much padding is in the card. Setting this attribute to true will reduce the padding in the card. This is useful for building cards like the contact list under practical examples above.
This attribute only works if header and footer are not set. true false |
| has_shadow | true | This controls if the card should have a shadow effect. true false |
| hover_effect | false | Displays an extra shadow on hover of the card.. true false |
| class | bw-card | Any additional css classes can be added using this attribute. For example if you prefer to have non-rounded cards you can set class="!rounded-none". |
<x-bladewind::card
title="recent updates"
has_shadow="true"
hover_effect="false"
compact="false"
class="!rounded-none">
<x-slot:header>...</x-slot:header>
<x-slot:footer>...</x-slot:footer>
...
</x-bladewind::card>
The table below shows a comprehensive list of all the attributes available for the Contact Card component.
| Option | Default | Available Values |
|---|---|---|
| name | blank | Name of the contact |
| department | blank | Department of the contact. |
| position | blank | Designation or position of the contact. |
| image | bladewind/images/avatar.png | Picture of the contact. |
| blank | Email of the contact. | |
| birthday | blank | Birthday of the contact. |
| mobile | blank | Mobile of the contact. |
| has_shadow | true | This controls if the card should have a shadow effect. true false |
| hover_effect | false | Displays an extra shadow on hover of the card.. true false |
| class | bw-contact-card | Any additional css classes can be added using this attribute. For example if you prefer to have non-rounded cards you can set class="!rounded-none". |
<x-bladewind.contact-card
name="Michael K. Ocansey"
mobile="+233.123.456.789"
image="/path/to/the/image/file"
position="Senior Copywriter"
email="mike@bladewindui.com"
department="Tech"
birthday="01-May-2000"
hover_effect="true"
class="!rounded-none">
// you can define additional content here
...
</x-bladewind.contact-card>
resources > views > components > bladewind > card.blade.phpresources > views > components > bladewind > contact-card.blade.php