From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/empty.html | 276 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 docs/components/empty.html (limited to 'docs/components/empty.html') diff --git a/docs/components/empty.html b/docs/components/empty.html new file mode 100644 index 0000000..b0d53c3 --- /dev/null +++ b/docs/components/empty.html @@ -0,0 +1,276 @@ + + + + Empty states - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Empty states

+
+
+ + + +
+
+ + +
+
+

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

+
+
+
+
+

You have no new messages

+

Click the button to start a conversation

+
+ +
+
+
+
+
+
+

You've successfully signed up

+

Click the button to invite your friends

+
+ +
+
+ +
+
+
+
+
+
+

You are not following anyone

+

Start to meet new friends

+
+ + +
+
+
+
+

+ An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. + Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. + HTML structure is exampled below. +

+ 
<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 -- cgit v1.3.1-23-gd82d