diff --git a/docs/index.html b/docs/index.html
index 474c24d..f877207 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -76,6 +76,7 @@
                 class="item"
                 v-html="sample.code">
               </div>
+              <p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
               <p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
               <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
             </section>
diff --git a/docs/script.js b/docs/script.js
index 98544f7..2424785 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -196,6 +196,23 @@ const sampleCollection = [
   </dialog>
 </section>`,
   },
+  {
+    title: 'avatar',
+    description: 'It is recommended to "image-rendering: pixelated".',
+    showCode: false,
+    code: `<img class="nes-avatar" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+
+<img class="nes-avatar is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+
+
+<img class="nes-avatar is-rounded" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+
+<img class="nes-avatar is-rounded is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-rounded is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-rounded is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">`,
+  },
 ];
 
 const coreteam = [
diff --git a/docs/style.css b/docs/style.css
index 135127b..2d2265b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -77,10 +77,6 @@ section.showcase > section.samplecode {
   right: 0px;
 }
 
-section.showcase > section.nes-container > p.note {
-  margin-top: 2.5rem;
-}
-
 section.showcase > section.samplecode > pre code {
   font-size: 13px;
   line-height: 1.5;