Skip to content

Cards

Flexible content containers.

8 component(s)

Event Card with Photo and Date Badge – Pure CSS cards preview

Event Card with Photo and Date Badge

Pure CSS event cards with a cover photo, ticket-stub date badge, category chip, time and venue details, price and a ticket button.

Pure CSS Cards
Glassmorphism Card – Tailwind CSS cards preview

Glassmorphism Card

Frosted glass profile card in Tailwind CSS with backdrop blur, a light reflection and a follow button over colorful animated gradient blobs.

Tailwind CSS Cards
Cards with Hover Lift – Pure CSS cards preview

Cards with Hover Lift

Pure CSS blog card grid where each card lifts with a deeper shadow and zooms its image on hover or keyboard focus.

Pure CSS Cards
Card with Image Overlay – Bootstrap 5 cards preview

Card with Image Overlay

Bootstrap 5 image cards with text overlaid on photos, a readability gradient, category badges, save buttons and a featured layout.

Bootstrap 5 Cards
Blog Post Card – Tailwind CSS cards preview

Blog Post Card

Tailwind CSS blog post card with cover illustration, category badge, date, reading time, clamped excerpt, author row and a fully clickable area.

Tailwind CSS Cards
3D Flip Card – Pure CSS cards preview

3D Flip Card

Three pure CSS 3D flip cards that turn on hover, keyboard focus or tap to reveal details and a link on the back.

Pure CSS Cards
Horizontal Card – Bootstrap 5 cards preview

Horizontal Card

Three Bootstrap 5 horizontal cards with the image on the left: an article card, a listing card with rating and price, and a compact course card.

Bootstrap 5 Cards

What is a card component?

A card is a flexible container that groups related content and actions about a single subject. A typical card has an image or icon, a title, some text and one or more actions, wrapped in a box with a border or shadow. Cards are among the most widely used UI patterns: product tiles, blog previews, pricing options, user profiles, dashboard widgets, feature blocks and settings panels are all variations of the card.

When to use cards

Use cards when you display a collection of similar items that users browse and compare, or when you want to separate distinct pieces of content on a busy page. For dense data that needs comparison across many attributes, a table is usually a better choice.

Best practices

  • Keep a consistent structure in a set of cards so users can scan them quickly.
  • Use a heading element for the card title and keep the heading level consistent with the page outline.
  • If the whole card is clickable, use one link (for example on the title) and stretch its clickable area with CSS instead of nesting multiple links.
  • Avoid placing interactive elements inside another link or button.
  • Use aspect-ratio and object-fit for card images so heights stay even.
  • Make focus states visible and ensure hover-only content is also available on focus and touch.
  • Arrange cards in a responsive grid; CSS Grid with repeat(auto-fill, minmax(...)) adapts nicely without breakpoints.

Bootstrap, Tailwind CSS and pure CSS versions

The card examples cover Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions are based on the card component and the grid, and Bootstrap 6 examples use the theme-* colour roles for borders, backgrounds and accents. Tailwind CSS versions build the card from utilities, and the pure CSS cards use custom properties so you can change radius, shadow and spacing in one place. Use the framework filter to find bootstrap card examples or Tailwind cards, try them in the live preview, then copy the code from the tabs or download it.