feat: Feature list

contents/_includes/patterns/feature-list.njk

@@ -0,0 +1,16 @@
+<div class="feature-list">
+    <div class="feature-list__image">
+        {% circle "md" %}
+    </div>
+    <div class="feature-list__desc">
+        {% lines "hor", 5 %}
+    </div>
+</div>
+<div class="feature-list feature-list--reverse">
+    <div class="feature-list__image">
+        {% circle "md" %}
+    </div>
+    <div class="feature-list__desc">
+        {% lines "hor", 5 %}
+    </div>
+</div>

contents/feature-list.md

@@ -0,0 +1,55 @@
+---
+layout: layouts/post.njk
+title: Feature list
+description: Create a feature list with CSS flexbox
+keywords: css feature list, css flexbox
+---
+
+## HTML
+
+```html
+<!-- Feature item -->
+<div class="feature-list">
+    <!-- Image -->
+    <div class="feature-list__image">
+        ...
+    </div>
+
+    <!-- Right side -->
+    <div class="feature-list__desc">
+        ...
+    </div>
+</div>
+
+<!-- Repeated items -->
+...
+```
+
+## CSS
+
+```css
+.feature-list {
+    display: flex;
+
+    /* OPTIONAL: Spacing between items */
+    margin: 0.5rem 0;
+}
+
+/* Reverse the order of image and content */
+.feature-list--reverse {
+    flex-direction: row-reverse;
+}
+
+.feature-list__image {
+    width: 2rem;
+}
+
+.feature-list__desc {
+    /* Take the remaining width */
+    flex: 1;
+}
+```
+
+{% demo %}
+{% include "patterns/feature-list.njk" %}
+{% enddemo %}

contents/index.njk

@@ -133,6 +133,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Feature comparison</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/feature-list/">
+                    <div class="pattern__cover">{% include "patterns/feature-list.njk" %}</div>
+                    <div class="pattern__title">Feature list</div>
+                </a>
+            </div>
         </div>
     </div>