MoreLesson 194Free preview

Labels

This lesson is part of How To · All levels

Summary

A label or badge is a small marker containing short text to give a category, status, or description of an item. Because of its small size, labels should be legible and not overlooked. CSS such as padding, border-radius, and contrast colors make labels look neat, while display: inline-blocks keep the size consistent with the content.

Key points

Labels are generally inline-blocked to follow text width.
Use small padding and border-radius for a read-able pill shape
Choose a color combination with adequate contrast between text and background
Use labels for status like New, Popular, or Exit

Full lesson

Code examples and quizzes

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