blob: 880090dcb26307f6d022446c50f6c460b00f64e6 (
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
|
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>
|
