W3.CSSLesson 6Free preview

W3.CSS Cards

This lesson is part of W3.CSS · All levels

Summary

A card is a container card with shadows used to wrap images, text, and buttons in a single visual unit. It provides a class w3-card that immediately adds box-shadow, so that the content appears raised above the background of the page. The card is very popular for product listings, profiles, and news content. (W3.CSS)

Key points

W3-card adds box-shadow to the container
W3-hover-shadow magnifies the shadow when the cursor is above it.
The card usually contains a combination of images, headings, text, and buttons
Add padding so the card's contents don't stick to the shadow edge

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.