bladewindUI

Card

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.

 

Basic Card

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>
                
            


recent activity
                
                    <x-bladewind.card title="recent activity">
                        // the card content goes here
                    </x-bladewind.card>
                
            

 

Practical Examples

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.

Invoice Table

Below is an example of an invoice table sitting in a basic BladewindUI Card. The BladewindUI Table component was used in building the invoice.

invoice details
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>
                
            

 

Huge Navigation Items

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.

Projects
Tasks
Ideas

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

 

Contact List

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.

image
Michael K. Ocansey
Senior Developer
Tech Team
image
Grace Adjoa Sedinam
Senior Medical Officer
Health & Safety Dept.
image
Alfred Rowe
Senior Developer
Tech Team
image
Judith Kabukie
Senior Attorney
Legal Team

                
                    <div class="grid grid-cols-2 gap-3">

                        <x-bladewind.card reduce_padding="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 reduce_padding="true">
                            ...
                        </x-bladewind.card>

                        <x-bladewind.card reduce_padding="true">
                            ...
                        </x-bladewind.card>

                        <x-bladewind.card reduce_padding="true">
                            ...
                        </x-bladewind.card>

                    </div>
                
            

 

Contact Card

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 practical examples above. A default avatar is used if one is not provided.

image
Michael K. Ocansey
Senior Copywriter Tech Team
+233.123.456.789
mike@bladewindui.com
01-May-2000
image
Michael K. Ocansey
Senior Copywriter
+233.123.456.789
mike@bladewindui.com
01-May-2000

                    
                        <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"></x-bladewind.contact-card>
                    
                

 

Header and Footer

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

image
mkocansey Greater Accra, Accra, Ghana
Photo by Akindele Ibukun from https://unsplash.com/@thevisualchef007

                    
                        <x-bladewind::card>

                            <x-slot name="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>

                            <img src="/path/to/the/image/file" />

                            <x-slot name="footer">
                                <div class="flex justify-between p-4">
                                    <div class="flex space-x-4">
                                        <svg> ... </svg>
                                        <svg> ... </svg>
                                        <svg> ... </svg>
                                    </div>
                                    <div>
                                        <svg> ... </svg>
                                    </div>
                                </div>
                            </x-slot>

                        </x-bladewind::card>
                    
                

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Card component.

IMPORTANT: Projects running Laravel 8 please read this

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.
reduce_padding 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
class bw-card Any additonal css classes can be added using this attribute. For example if you prefer to have non-rounded cards you can set class="!rounded-none".

 

Card with all attributes defined

                
                    <x-bladewind.card 
                        title="recent updates"
                        has_shadow="true"
                        reduce_padding="false"
                        class="!rounded-none">

                        <x-slot name="header">...</x-slot>
                        <x-slot name="footer">...</x-slot>

                        ...
                        
                    </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.
email 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
class bw-contact-card Any additonal css classes can be added using this attribute. For example if you prefer to have non-rounded cards you can set class="!rounded-none".

 

Contact Card with all attributes defined

                
                    <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"
                        class="!rounded-none">
                        
                        // you can define additional content here
                        ...
                        
                    </x-bladewind.contact-card>
                
            

 

The source file for the card component is available in resources > views > components > bladewind > card.blade.php

The source file for the contact card component is available in resources > views > components > bladewind > contact-card.blade.php