To create a label tag, add the .label-tag class to the .label.
To create a label pill, add the .label-pill class to the .label.
Labels scale to match the size of the immediate parent element.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
A label can contain an image — just place an <img> with
the .label-image class within the label. The image can be positioned
left or right by adding .left or .right to
the .label-image.
Note: The image will automatically scale to fit the label's height.
To make a .label outline, add the .label-outline class.
A corner label must be positioned inside a container with position: relative
to display properly. If a container is rounded you will need to add
overflow:hidden to the container to produce a rounded label.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
A ribbon label must be positioned inside a container with position: relative
to display properly.
Like!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Starred
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Uploaded!
![]()
John
Robert
Michelle
Timothy
Denise