move image-list into a component

_includes/components/image-list.html

@@ -0,0 +1,8 @@
+<div class="image-list">
+  {% for item in include.items %}
+    {% include elements/hex-icon.html file=item.image %}
+    <div class="small">
+      {{ item.description }}
+    </div>
+  {% endfor %}
+</div>

_pages/learning/crystal_programming.html

@@ -2,6 +2,20 @@
 title: "Building efficient, safe, and readable web and CLI applications with Crystal"
 layout: wide
 
+what_you_will_learn:
+- image: icons/merge-type.svg
+  description: Explore how Crystal combines the merits of other languages
+- image: icons/folder.svg
+  description: Understand how to leverage existing C libraries without writing any C
+- image: icons/update.svg
+  description: Focus on zero-cost abstractions with compile-time macros
+- image: icons/code.svg
+  description: Use an example-based approach to demonstrate language features
+- image: icons/apps.svg
+  description: Develop a variety of Crystal applications, such as web and CLI apps
+- image: icons/library-books.svg
+  description: Gain an understanding of the macro API and annotations
+
 authors:
 - image: /assets/learning/george.png
   description: |
@@ -58,22 +72,7 @@
       <span>What you will learn</span>
     </div>
   </div>
-
-  <div class="image-list">
-    {% include elements/hex-icon.html file='icons/merge-type.svg' %}
-    <div class="small">Explore how Crystal combines the merits of other languages</div>
-    {% include elements/hex-icon.html file='icons/folder.svg' %}
-    <div class="small">Understand how to leverage existing C libraries without writing any C</div>
-    {% include elements/hex-icon.html file='icons/update.svg' %}
-    <div class="small">Focus on zero-cost abstractions with compile-time macros</div>
-    {% include elements/hex-icon.html file='icons/code.svg' %}
-    <div class="small">Use an example-based approach to demonstrate language features</div>
-    {% include elements/hex-icon.html file='icons/apps.svg' %}
-    <div class="small">Develop a variety of Crystal applications, such as web and CLI apps</div>
-    {% include elements/hex-icon.html file='icons/library-books.svg' %}
-    <div class="small">Gain an understanding of the macro API and annotations</div>
-  </div>
-
+  {% include components/image-list.html items=page.what_you_will_learn %}
   <div class="full-width-rule">
   </div>
 </section>

_sass/components/_image-list.scss

@@ -0,0 +1,25 @@
+.image-list {
+  display: grid;
+  grid-template-columns: repeat(1, min-content 1fr);
+  align-items: center;
+  row-gap: 20px;
+
+  .small {
+    font-size: 85%;
+    margin-right: var(--padding-lg);
+  }
+}
+
+@media (min-width: 35em) {
+  .image-list {
+    row-gap: 40px;
+    grid-template-columns: repeat(2, min-content 1fr);
+  }
+}
+
+@media (min-width: 55em) {
+  .image-list {
+    row-gap: 60px;
+    grid-template-columns: repeat(3, min-content 1fr);
+  }
+}

_sass/main.scss

@@ -32,6 +32,7 @@
   @import "components/cards-list";
   @import "components/profile-card";
   @import "components/content";
+  @import "components/image-list";
   @import "components/link-item";
   @import "components/navbar";
   @import "components/post-teaser";

_sass/pages/_learning.scss

@@ -1,29 +1,3 @@
-.image-list {
-  display: grid;
-  grid-template-columns: repeat(1, min-content 1fr);
-  align-items: center;
-  row-gap: 20px;
-
-  .small {
-    font-size: 85%;
-    margin-right: var(--padding-lg);
-  }
-}
-
-@media (min-width: 35em) {
-  .image-list {
-    row-gap: 40px;
-    grid-template-columns: repeat(2, min-content 1fr);
-  }
-}
-
-@media (min-width: 55em) {
-  .image-list {
-    row-gap: 60px;
-    grid-template-columns: repeat(3, min-content 1fr);
-  }
-}
-
 .book-presenter {
   font-size: 120%;
   display: grid;

_style_guide/components/image-list.html

@@ -0,0 +1,12 @@
+---
+title: Image List
+type: components
+module: _includes/components/image-list.html
+
+items:
+- image: icons/merge-type.svg
+  description: Lorem ipsum dolor sit amet consectetur, adipisicing elit
+- image: icons/folder.svg
+  description: Quia quos autem veniam libero!
+---
+{% include components/image-list.html items=page.items %}