labels

Labels

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

Labels

Add a class u-label u-label-default to make basic label. The margin spacing might be any but for the all labels examples the following margin spacing classes are used g-mr-10 and g-mb-10.

Default Labels

Default Success Info Warning Danger

Colored Labels

Primary Lightred Darkred Blue Indigo Purple Darkpurple Pink Orange Deeporange Aqua Yellow Cyan Teal Brown Bluegray Black

Rounded Labels

Primary Lightred Darkred Blue Indigo Purple Darkpurple Pink Orange Deeporange Aqua Yellow Cyan Teal Brown Bluegray Black
Primary Lightred Darkred Blue Indigo Purple Darkpurple Pink Orange Deeporange Aqua Yellow Cyan Teal Brown Bluegray Black

Label Sizes

Primary Lightred Darkred Blue Indigo Purple Darkpurple Pink Orange Deeporange Aqua Yellow Cyan Teal Brown Bluegray Black
Primary Lightred Darkred Blue Indigo Purple Darkpurple Pink Orange Deeporange Aqua Yellow Cyan Teal Brown Bluegray Black

Numeric Labels

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 101 102 103 104 105 106 107 108 109 111 111 112 113 114 115 116
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 101 102 103 104 105 106 107 108 109 111 111 112 113 114 115 116
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 101 102 103 104 105 106 107 108 109 111 111 112 113 114 115 116

Labels with Icons

At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing Elitut eleifend Fend nisl
At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing Elitut eleifend Fend nisl
At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing

Different Usages

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New