- Components
- Card
Components
Tailwind CSS Card
Use pre-built Tailwind CSS cards with various layouts and interactive UI components. Ideal for product and event listings, user profiles, dashboards, and more.
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.
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.
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
Simple footer within a card.
Default card size.
Large card size.
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.
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 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.
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
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.
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.
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 5 mins ago
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
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.
Panel actions
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.
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
Empty state
Display empty state placeholder when there is no data provided, display for friendly tips.
No data to show
