MoreLesson 189Free preview

Profile Card

This lesson is part of How To · All levels

Summary

A profile card is a concise component to display a person's identity, usually containing a photo, name, post, and action button. These cards are often used on team pages, user directories, or social media profiles. With neat HTML and simple CSS, the cards can look professional while remaining responsive on a small screen.

Key points

Arrange the cards from the avatar, name, brief description, and one or two action buttons
Use border-radius: 50% and object-fit: cover to make a round profile picture without edges
Limit the card's width to max-width and center using the margin: auto
Add box-shadow and hover transitions to give the impression of depth.

Full lesson

Code examples and quizzes

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