From 8e1d26ff11e600eb93dd1cd3cd01aaf287c100cf Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 16 Sep 2016 15:55:31 +0800
Subject: Show initals when avatar image is unavailable or not fully loaded

---
 index.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 9705e0c..ba35496 100644
--- a/index.html
+++ b/index.html
@@ -1197,6 +1197,15 @@
                     <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></figure>
                     <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></figure>
                 </div>
+
+                <div class="column col-3">
+                    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
+                      <img src="demo/img/avatar-1.png" />
+                    </figure>
+                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;">
+                      <img src="demo/img/avatar-2.png" />
+                    </figure>
+                </div>
             </div>
 
             <section class="notes">
@@ -1216,6 +1225,11 @@
 &lt;<span class="tag">/figure</span>&gt;
 
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
+
+<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
+&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;
+    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
+&lt;<span class="tag">/figure</span>&gt;
 </pre>
 
         </section>
-- 
cgit v1.3.1-23-gd82d