W3.CSSLesson 42Free preview

W3.CSS Badges

This lesson is part of W3.CSS · All levels

Summary

A badge is a small label that displays a number or a concise status, such as the number of messages notified. W3.CSS provides a class of .w3-badge attached to <span> within a button or text. The size and background color can be adjusted by color classes to quickly display information.

Key points

.w3-badge displaying small colored labels with contrast text
Inserted in <button>, <a>, or text elements as a number marker
Change the background color with color classes such as .w3-red or .w3-blue
Pack with relative-positioned elements to make the notification point floating
Use the badge only for brief information so as not to confuse

Full lesson

Code examples and quizzes

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