blob: f6232a26c09d61075d6ff82b98f82cdf57e8f0b3 (
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'badges'
- var parent = 'components'
- var title = 'Badges - Components - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('badges', 'Badges')
include ../_layout/_ad-g.pug
p Badges are often used as unread number indicators.
.docs-demo.columns
.column.col-3.col-xs-6
span.badge(data-badge="")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="8")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="88")
| Notifications
.column.col-3.col-xs-6
span.badge(data-badge="888")
| Notifications
p
| Add the #[code badge] class to non self closing elements.
| And add the #[code data-badge] attribute to define the content of a badge.
| The badge will appear in the top-right direction of the element.
p
| If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
.docs-demo.columns
.column.col-sm-12
button.btn.badge(data-badge="") Button
button.btn.badge(data-badge="8") Button
.column.col-sm-12
button.btn.btn-primary.badge(data-badge="") Button
button.btn.btn-primary.badge(data-badge="8") Button
.column.col-sm-12
figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-1.png" alt="YZ")
figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-2.png" alt="YZ")
figure.avatar.badge(data-badge="8" data-initial="YZ")
img(src="../img/avatar-3.png" alt="YZ")
p
| Badges support #[code button] and #[code avatars] elements as well.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<span class="badge">
Notifications
</span>
<span class="badge" data-badge="8">
Notifications
</span>
<button class="btn badge" data-badge="8">
Button
</button>
<figure class="avatar badge" data-badge="8" data-initial="YZ">
<img src="img/avatar-3.png" alt="YZ">
</figure>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
