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
Show code Copy code

Colored Labels

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

Rounded Labels

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

Label Sizes

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

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
Show code Copy code
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
Show code Copy code
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
Show code Copy code

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
Show code Copy code
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
Show code Copy code
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
Show code Copy code

Different Usages

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

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New
Show code Copy code