Badge
A badge highlights system generated metadata as an attribute of a larger objects. Badges highlight metadata of objects, the kind of information that always needs some context and isn’t useful on its own. For example, they can be used to indicate an issue’s status, a member’s role, or if a branch is protected.
How to use
Badges are mostly buttons that lead to some page, so to
use badges
make
button > a(to link a page) > img/span(image for
profile picture and
span for icon) + span(for badge).
For example
Result
Use badge-(color) to show status.
Available sizes
3 standard sizes i,e. small(40px), medium(64px) and
large(96px) are
available and can be accessed by using
material-icons icon-sm/md/lg and for images
badge-img img-sm/md/lg. Apart from
standard, flexible
sizes are available for example 8, 16, 32, 40px... that
can be
accessed simply by using icon-s6/7/8 and
img-s6/7/8.
Examples
Example for icon status
Examples for image badge. To use simply add
badge-img img-(size).