Card - Laravel Blade

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

Default Card

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

Blade code

<x-fwb.card class="max-w-sm" title="Noteworthy technology acquisitions 2021" title-element="h5">
    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
</x-fwb.card>

Card with CTA Button

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

Read more

Blade code

<x-fwb.card class="max-w-sm" title="Noteworthy technology acquisitions 2021" title-element="h5">
    <x-slot name="content">
        <p class="mb-3 font-normal text-body">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
        <x-fwb.button href="#">
            Read more
            <x-fwb-o-arrow-right class="w-3.5 h-3.5 ms-2 rtl:rotate-180" />
        </x-fwb.button>
    </x-slot>
</x-fwb.card>

Card with Image

Blog post image
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

Read more

Blade code

<x-fwb.card class="max-w-sm" img="https://flowbite.com/docs/images/blog/image-1.jpg" imgAlt="Blog post image" title="Noteworthy technology acquisitions 2021" title-element="h5">
    <x-slot name="content">
        <p class="mb-3 font-normal text-body">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
        <x-fwb.button href="#">
            Read more
            <x-fwb-o-arrow-right class="w-3.5 h-3.5 ms-2 rtl:rotate-180" />
        </x-fwb.button>
    </x-slot>
</x-fwb.card>

Horizontal Card

Blog post image
Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

Blade code

<x-fwb.card :horizontal="true" img="https://flowbite.com/docs/images/blog/image-4.jpg" imgAlt="Blog post image" title="Noteworthy technology acquisitions 2021" title-element="h5">
    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
</x-fwb.card>

Card as Link

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

Blade code

<x-fwb.card class="max-w-sm" href="#" title="Noteworthy technology acquisitions 2021" title-element="h5">
    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
</x-fwb.card>

Card with Header and Footer

Card Header

This card has both a header and footer section using named slots.

Blade code

<x-fwb.card class="max-w-sm">
    <x-slot:header>
        <h5 class="text-xl font-bold text-gray-900 dark:text-white">Card Header</h5>
    </x-slot:header>
    <p class="font-normal text-gray-700 dark:text-gray-400">This card has both a header and footer section using named slots.</p>
    <x-slot:footer>
        <div class="flex items-center gap-2">
            <x-fwb.button size="sm">Accept</x-fwb.button>
            <x-fwb.button size="sm" color="light">Decline</x-fwb.button>
        </div>
    </x-slot:footer>
</x-fwb.card>

User Profile Card

User profile
Bonnie Green
Visual Designer

Blade code

<x-fwb.card class="max-w-sm">
    <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="User profile"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
        <div class="flex mt-4 gap-2">
            <x-fwb.button size="sm">Add friend</x-fwb.button>
            <x-fwb.button size="sm" color="light">Message</x-fwb.button>
        </div>
    </div>
</x-fwb.card>

Component Properties

Card x-fwb.card

Prop Type Default Description
href string|null null Make the entire card a clickable link.
horizontal bool false Display card content in a horizontal layout with image on the left.
img string|null null Image URL to display on the card.
imgAlt string '' Alt text for the card image.
imgPosition string top Position of the image. Options: top, bottom.
title string|null null Card title text. Automatically styled with text-2xl font-bold. When set, the default slot is wrapped in a <p> with body text styles.
title-element string span HTML tag for the title element (e.g. h5, h3, span).
content slot — Named slot for rich HTML body content. Use with title when the body needs more than plain text (buttons, lists, etc.).
header slot - Named slot for the card header with bottom border.
footer slot - Named slot for the card footer with top border.