update doc and examples

1 files changed, 7 insertions, 8 deletions

diff --git a/index.html b/index.html
index c4cad3a..714cb2f 100644
--- a/index.html
+++ b/index.html
@@ -982,23 +982,22 @@
                     <section class="empty">
                         <i class="icon icon-people"></i>
                         <p class="empty-title">You are not following anyone</p>
-                        <button class="btn btn-primary">Discover</button>
+                        <button class="btn btn-primary">Discover people</button>
                     </section>
                 </div>
             </div>
 
             <section class="notes">
-                <p>Spectre also provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code> and <code>.col-md-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
+                <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. </p>
             </section>
 
             <!-- empty states example -->
 <pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
-        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-6&quot;</span>&gt;col-xs-6&lt;<span class="tag">/div</span>&gt;
-        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
-        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
+    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
+    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </pre>