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!