Merge pull request #451 from picturepan2/0.5.2

0.5.2

1 files changed, 50 insertions, 0 deletions

diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
new file mode 100644
index 0000000..880090d
--- /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.
+
+.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>
\ No newline at end of file