1. Components
  2. Card

Components

Tailwind CSS Card - Preline UI

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

Basic usage

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.

Featured

Card title

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

Card link

Simple footer within a card.

Card title

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

Card link

Last updated 5 mins ago

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

Card title

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

Go somewhere

Card title

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

Go somewhere

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.

Animations

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 layout

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

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.