1. Components
  2. Card

Components

Tailwind CSS Card

Cards provide a flexible and extensible content container with multiple variants and options.

Example

A basic card containing a title, content and an extra corner content.

Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated.

Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.

Body

Simple body example with text.

This is some text within a card body.

Simple card

A simple card only containing a content area.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Add an optional header and/or footer within a card.

Simple footer within a card.

Sizes

Small card size.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Default card size.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Large card size.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Add some navigation to a card's header (or block).

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image placeholders

Similar to headers and footers, cards can include top and bottom "image placeholder"—images at the top.

Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Or bottom of the card.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Image Description

Image overlays

Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.

Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Attention needed

Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Image scaling animation on hover

Animate the card image with zoom out on hover.

Transition on hover

Animate the card with a shadow on hover.

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Card group

Use card groups to render cards as a single, attached element with equal width and height columns.

Image Description

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 5 mins ago

Image Description

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 5 mins ago

Image Description

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 5 mins ago

Top bordered card New

You can change the color of the border by using a different border-color utility class. For example, to change the border color to red, you would use the border-red-500 utility class.

You can also change the width of the border by using a different border-width utility class. For example, to make the border wider, you would use the border-t-2 utility class.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Panel actions New

Top bordered card example.

Requires JS

Note that this component requires the use of our Tooltip plugin, else you can skip this message if you are already using Preline UI as a bundle.

Learn more

Card action

With supporting text below as a natural lead-in to additional content.

Card link

With alert

Use an alert box that perfectly sits within a card.

Featured

Attention needed! This is an alert box.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Centered body content

Simple example of a center aligned body content.

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Empty state

Display empty state placeholder when there is no data provided, display for friendly tips.

No data to show

Scrollable body

Simple example of a center aligned body content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.