MoreLesson 190Free preview
Product Card
This lesson is part of How To · All levels
Summary
The product card contains brief information about a product: picture, name, description, price, and buy button. These components become the basic blocks on a catalog page or online store. With a flexbox and grid, the card set can be neatly arranged and the number of columns adjusted according to the width of the screen.
Key points
- The usual information sequence is images, product names, prices, then the action button.
- Use the object-fit: cover to keep product photos proportionate to the area of the image
- Arrange the card's contents in flex-direction: columns and gaps to keep the distance consistent
- Grid makes automatic catalogs responsive
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.