MoreLesson 187Free preview
Cards
This lesson is part of How To · All levels
Summary
This lesson discusses the card, a box-shaped container of content that brings together images, titles, descriptions, and actions. The card is commonly used in blogs, product catalogs, and dashboards. With CSS Grid or Flexbox, a set of cards can be neatly arranged, have uniform heights, and remain responsive across different screen sizes.
Key points
- Use semantic elements like articles for each card
- Apply border-radius, box-shadow, and padding to separate the card from the background
- Adjust the width of the image: 100% and the object-fit: cover to avoid distortion
- Use CSS Grid to make the card responsive without much media query
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.