logo
v2.7.0

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.

The cards stand out much better on a non-white background colour. Show me

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

https://lh3.googleusercontent.com/a-/AOh14GhSotQTt_njzqqq-265MKM5z5iPP9m-_A2myyrGXQ=s288-p-rw-no
Michael K. Ocansey
Senior Developer
Tech Team
data:image/jpeg;base64,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
Grace Adjoa Sedinam
Senior Medical Officer
Health & Safety Dept.
data:image/jpeg;base64,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
Alfred Rowe
Senior Developer
Tech Team
https://pbs.twimg.com/profile_images/1388977302583775237/z5uvkwkT_400x400.jpg
Judith Kabukie
Senior Attorney
Legal Team

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

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

/assets/images/doc.png
Jane A. Doe
Senior Medical Officer
+233.444.456.542
doc@hospital.com
01-May-2000
https://bladewindui.com/vendor/bladewind/images/avatar.png
Michael K. Ocansey
Tech Team Senior Dev
+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" />

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

https://lh3.googleusercontent.com/a-/AOh14GhSotQTt_njzqqq-265MKM5z5iPP9m-_A2myyrGXQ=s288-p-rw-no
mkocansey Greater Accra, Accra, Ghana
Photo by Akindele Ibukun from https://unsplash.com/@thevisualchef007
        
            <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>
        
    

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

Card Component Attributes

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

Card with all attributes defined


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

Contact Card Component Attributes

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

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"
        hover_effect="true"
        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