MoreLesson 182Free preview

Badges

This lesson is part of How To · All levels

Summary

This lesson discusses badges, small labels that provide additional information such as the number of notifications, status, or category. Badges are usually inline elements with a coloured background and rounded corners. For the notification badge above the icon, the absolute position and padding of the container must be adjusted so as not to cover the icon.

Key points

Use a span or inline element with a display: inline-block to keep the badge following the text
Provide padding, border-radius, and contrasting colors to make the badge easy to read
For badges at the corner of the icon, use the container position: relative and badge position: absolute
Include alternative text or labels where the badge only displays numbers without context

Full lesson

Code examples and quizzes

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