• components
  • Card

components

Tailwind CSS Card

Cards organize and present content for easy reading and understanding.

Class Name
Type
Description
cardComponentContainer element.
card-groupComponentContainer for card groups.
card-headerPartHeader part (content)
card-titlePartTitle of card.
card-bodyPartBody part (content)
card-actionsPartActions part (buttons, etc.)
card-footerPartContainer for footer.
card-borderStyleAdds border to card component.
card-alertStyleStyles alert messages inside a card with rounded corners.
card-xsSizeThe card will be extra small in size.
card-smSizeThe card will be small in size.
card-mdSizeThe card will be medium(default) in size.
card-lgSizeThe card will be large in size.
card-xlSizeThe card will be extra large in size.
card-sideModifierThe image in ‘figure’ will be on to the side.
image-fullModifierThe image in ‘figure’ element will be the background.

Basic example

Default

A fundamental card includes a title, content, and an additional action content.Cards initially have no predefined width, thus they inherit a 100% width by default unless specified otherwise.

Check out our card component which Utilize card component class.

Size

Card Sizes

Card sizes with card-{xs|sm|md|lg|xl} utility classes.

Content types

Body

Simple body example with text.

Image

Example showcasing an image card with content.

Titles, text, and links

Buttons and links placed within card-actions can be referred to as actions.

Card header

With component class card-header you can specify the styling and content for the header sections of a card element in your web application.

Card footer

With component class card-footer, you can specify the styling and content for the footer sections of a card element in your web application.

List group

Create a simple list displayed within a card-like interface. Utilize the Divide utility class to add borders between the list items.

Images caps & overlay

Image placeholders

The image’s positioning in the card is determined by the placement of the figure element. When the figure element is the first child, the image will be positioned at the top; conversely, if it is the last child, the image will be positioned at the bottom.

Image at top

Or image at bottom

Image overlays

By utilizing the image-full modifier class, the image expands to occupy the entire width and is employed as an overlay.

Card glass

Apply the glass modifier class to the card component class to impart a glass effect onto the card.

Horizontal

The card-side class positions images responsively, with options for left or right placement based on breakpoints like sm, md, and lg.

Card layout

Card groups

Utilize the card-group class to establish a container for organizing cards into a cohesive group.

Animations

Image scaling animation on hover

Implement a hover effect on the card image that animates a zoom-out transition.

Translate animation on hover

Apply a hover animation to the card image that translates it upwards.

Navigation

Tabs in card

Basic tabs in card example.

Illustrations

Style variation

Feel free to apply this variation to all our semantic color utility classes or Tailwind colors.

Text alignments

By default, text is aligned left. You can modify the alignment using utility classes such as text-center or text-right.

Card with border

You can use card-border for bordered card.

Card with alert

You can use the card-alert class to style alert messages inside a card.

Empty card

Show an empty state placeholder when no data is available, providing friendly tips for users.

Required FlyonUI JS

Card actions

Utilize the data-remove-element attribute to specify the connected ID for card removal. Customize the removal animation by incorporating the removing: modifier, as illustrated below.