Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Cards

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

Use the following simple card component with a title and description. Notice the `href` prop set, as that card is one big `a` element.

Card with action button

Use the following example of a card element if you also want to have an action button.
Noteworthy technology acquisitions 2021

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

Card with link

This example can be used to show a CTA as a link instead of a button inside the card.
Need a help in Claim?

Go to this step by step guideline process on how to certify for your weekly benefits:

See our guideline

Card with image

User reverse=true to reverse the position of an image. You can use the following example of a card element with an image for blog posts, user cards, and many more.
Noteworthy technology acquisitions 2021

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

Horizontal card

If you want to spice up your cards you can use the following card which has its child elements aligned horizontally.

User profile card

Use this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user.
Bonnie Green
Visual Designer

Card with form inputs

Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users.

Sign in to our platform

Lost password?
Not registered? Create account

E-commerce card

Use this card for your e-commerce websites and show information about the products and enable actions such as adding a review and adding the product to the cart.

Call to action card

Use this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project.
Work fast from anywhere

Stay up to date and move work forward with Flowbite on iOS & Android. Download the app today.

Card with list

Use this card example if you want to show a list of data:
Latest Customers
View all
  • Neil Sims

    Neil Sims

    email@windster.com

    $320
  • Bonnie Green

    Bonnie Green

    email@windster.com

    $3467
  • Michael Gough

    Michael Gough

    email@windster.com

    $67

Pricing card

Show detailed information to potential customers about your product’s pricing plan, list of features, and a purchase button.
Standard plan
$ 49 /month
  • 2 team members
  • 20GB Cloud storage
  • Integration help
  • Sketch Files
  • API Access
  • Complete documentation
  • 24×7 phone & email support

Testimonial card

Use this example to split cards into multiple sections such as for testimonials or reviews.

Very easy this was to integrate

If you care for your time, I hands down would go with this."

Karen profile
Bonnie Green
Developer at Open AI

Solid foundation for any project

Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!"

Robert profile
Roberta Casas
Lead designer at Dropbox

Mindblowing workflow

Aesthetically, the well designed components are beautiful and will undoubtedly level up your next application."

Jese profile
Jese Leos
Software Engineer at Facebook

Efficient Collaborating

You have many examples that can be used to create a fast prototype for your team."

joseph profile
Joseph McFall
CTO at Google