Skip to main content

Card layout

In CSS, a card layout is a design pattern where content is presented inside a "card" -- a rectangular container with its own boundary, spacing, and decoration.

You may think of it like an index card or business card: it visually groups related information together in a box.

A card typically includes css styling such as:

  • padding
  • border or shadow to distinguish it from the background
  • rounded corners ( border-radius)

A card typically includes content such as:

  • title or heading
  • text or description
  • image or icon
  • button or link

Example cards​

card example layout
Example Card Layout
card example layout
Example Card Layout
card example layout
Example Card Layout
card example layout
Example Card Layout
try css card

See w3schools for great resources on how to create card layouts.