diff options
Update old docs to new Pug templates
1 files changed, 50 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/empty.pug | 50 |
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug new file mode 100644 index 0000000..0ac70dc --- /dev/null +++ b/docs/src/contents/empty.pug @@ -0,0 +1,50 @@ +p + | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. + +.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>
\ No newline at end of file |