feat: Add avatar list

contents/_includes/patterns/avatar-list.njk

@@ -0,0 +1,11 @@
+<div class="avatars">
+    <div class="avatars__item">
+        <div class="avatars__image">A</div>
+    </div>
+    <div class="avatars__item">
+        <div class="avatars__image">B</div>
+    </div>
+    <div class="avatars__item">
+        <div class="avatars__image">C</div>
+    </div>
+</div>

contents/accordion.md

@@ -85,5 +85,5 @@ keywords: css accordion, css flexbox
 ```
 
 {% demo %}
-{% include "covers/accordion.njk" %}
+{% include "patterns/accordion.njk" %}
 {% enddemo %}

contents/arrow-buttons.md

@@ -87,5 +87,5 @@ keywords: css arrow buttons
 ```
 
 {% demo %}
-{% include "covers/arrow-buttons.njk" %}
+{% include "patterns/arrow-buttons.njk" %}
 {% enddemo %}

contents/avatar-list.md

@@ -0,0 +1,53 @@
+---
+layout: layouts/post.njk
+title: Avatar list
+description: Create an avatar list with CSS flexbox
+keywords: css avatar, css flexbox
+---
+
+## HTML
+
+```html
+<div class="avatars">
+    <!-- Avatar item -->
+    <div class="avatars__item">
+        <div class="avatars__image">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.avatars {
+    display: flex;
+}
+
+.avatars__item {
+    /* Nagative margin make avatar overlap to previous one */
+    margin-left: -0.25rem;
+}
+
+.avatars__image {
+    /* Add a white curve between avatars */
+    box-shadow: 0 0 0 0.25rem #fff;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+```
+
+{% demo %}
+{% include "patterns/avatar-list.njk" %}
+{% enddemo %}

contents/avatar.md

@@ -39,5 +39,5 @@ keywords: css avatar, css flexbox
 ```
 
 {% demo %}
-{% include "covers/avatar.njk" %}
+{% include "patterns/avatar.njk" %}
 {% enddemo %}

contents/index.njk

@@ -15,22 +15,28 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">            
             <div class="card__item">
                 <a class="card__link" href="/accordion/">
-                    <div class="card__cover">{% include "covers/accordion.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/accordion.njk" %}</div>
                     <div class="card__title">Accordion</div>
                 </a>
             </div>
             <div class="card__item">
                 <a class="card__link" href="/arrow-buttons/">
-                    <div class="card__cover">{% include "covers/arrow-buttons.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/arrow-buttons.njk" %}</div>
                     <div class="card__title">Arrow buttons</div>
                 </a>
             </div>
             <div class="card__item">
                 <a class="card__link" href="/avatar/">
-                    <div class="card__cover">{% include "covers/avatar.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/avatar.njk" %}</div>
                     <div class="card__title">Avatar</div>
                 </a>
             </div>
+            <div class="card__item">
+                <a class="card__link" href="/avatar-list/">
+                    <div class="card__cover">{% include "patterns/avatar-list.njk" %}</div>
+                    <div class="card__title">Avatar list</div>
+                </a>
+            </div>
         </div>
     </div>