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
.
Colored Labels
Rounded Labels
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
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
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
Different Usages
# | First Name | Last Name | Username | Status |
---|---|---|---|---|
1 | Mark | Otto | @mdo | Expiring |
2 | Jacob | Thornton | @fat | Success |
3 | Larry | the Bird | Error! | |
4 | htmlstream | Web Design | @htmlstream | Pending |