MoreLesson 201Free preview

List Group with Badges

This lesson is part of How To · All levels

Summary

The badge on the list group adds a number or status marker to the right of each item, for example the number of unread messages. Flex layout with justify-content: space-between automatically separates text and badges to the left and right ends. The badge itself is usually a pill-shaped background with a contrasting background to make it easy to see.

Key points

Use the flexbox on the item so that the text and badge are at the opposite end
Pill-shaped badges made with padding and large-range border
The color of the badge should contrast with the background of the item, including when the item is active
Include context of text or labels so that the badge number is not ambiguous

Full lesson

Code examples and quizzes

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