blob: 74586c7d60dccf03c44d8dc99c2fbf74bffe24af (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'labels'
- var parent = 'elements'
- var title = 'Labels - Elements - Spectre.css CSS Framework'
- var description = 'Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('labels', 'Labels')
include ../_layout/_ad-g.pug
p Labels are formatted text tags for highlighted, informative information.
.docs-demo.columns
.column
span.label.mr-1 default label
span.label.label-primary.mr-1 primary label
span.label.label-secondary.mr-1 secondary label
span.label.label-success.mr-1 success label
span.label.label-warning.mr-1 warning label
span.label.label-error error label
p
| Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
| You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- normal labels -->
<span class="label">default label</span>
<span class="label label-primary">primary label</span>
+docs-subheading('labels-rounded', 'Rounded labels')
.docs-demo.columns
.column
span.label.label-rounded.mr-1 default label
span.label.label-rounded.label-primary primary label
p
| Add the #[code label-rounded] class to have rounded labels.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- rounded labels -->
<span class="label label-rounded label-primary">primary label</span>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
