blob: 51ebadcd43a86ac590b6e0b3f0dce96b2df64f52 (
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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'empty'
- var parent = 'components'
- var title = 'Empty states - Components - Spectre.css CSS Framework'
- var description = 'Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('empty', 'Empty states')
include ../_layout/_ad-g.pug
p
| Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
.docs-demo.columns
.column.col-12
.empty
.empty-icon
i.icon.icon-3x.icon-mail
p.empty-title.h5 You have no new messages
p.empty-subtitle Click the button to start a conversation
.empty-action
button.btn.btn-primary Send a message
.column.col-12
.empty
.empty-icon
i.icon.icon-3x.icon-mail
p.empty-title.h5 You've successfully signed up
p.empty-subtitle Click the button to invite your friends
.empty-action
button.btn.btn-primary Invite your friends
.empty-action
button.btn.btn-link Skip
.column.col-12
.empty
.empty-icon
i.icon.icon-3x.icon-people
p.empty-title.h5 You are not following anyone
p.empty-subtitle Start to meet new friends
.empty-action.input-group.input-inline
input.form-input(type="text" placeholder="")
button.btn.btn-primary.input-group-btn Search
p
| An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
| Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
| HTML structure is exampled below.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="empty">
<div class="empty-icon">
<i class="icon icon-people"></i>
</div>
<p class="empty-title h5">You have no new messages</p>
<p class="empty-subtitle">Click the button to start a conversation.</p>
<div class="empty-action">
<button class="btn btn-primary">Send a message</button>
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
