The card component can be used to show a wide variety of content such as previews of blog posts, user profiles, pricing plans, and more. Choose from one of the many examples built with React and the utility classes from Tailwind CSS.

To start using the card component you will need to import it from flowbite-react:

import { Card } from "flowbite-react";

Default card#

Use this example to show a simple card component with a title and description and apply the href tag to the <Card> component to set a hyperlink to the card.

Card with CTA button#

By also importing the <Button> component you can add it inside the card to show a call to action button.

Card with image#

Add an image to the card by using the imgSrc prop and set the imgAlt prop to add an alt text to the image.

Card with custom image render function#

Specify your own render function for the image component for the card by using the renderImage prop. This is especially useful when using the component with NextJS or Gatsby.

Horizontal card#

Use the horizontal prop to show the card in a horizontal layout.

User profile card#

Use this example to show a user card with a profile picture, name, job title, buttons and a dropdown menu.

Card with form#

You can also add form elements inside of the card component such as for sign up or login forms.

E-commerce card#

Use this example to show a product card with an image (product preview), title, price, rating stars and buttons built for E-commerce websites.

CTA card#

Use this component to display a call to action card for mobile applications where you feature download buttons for App Store and Google Play.

Card with list#

Use this component to display a card with a list of items such as your latest customers or latest orders that include an image, descriptive text and a link to view more.

Pricing card#

Use the pricing card component to show the pricing of your product or service.

Crypto card (web3)#

This component can be used for crypto and web3 related projects where you can choose which wallet you want to connect with (ie. Metamask, Coinbase).

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800",
    "children": "flex h-full flex-col justify-center gap-4 p-6",
    "horizontal": {
      "off": "flex-col",
      "on": "flex-col md:max-w-xl md:flex-row"
    },
    "href": "hover:bg-gray-100 dark:hover:bg-gray-700"
  },
  "img": {
    "base": "",
    "horizontal": {
      "off": "rounded-t-lg",
      "on": "h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
    }
  }
}

References#