roadmap component

_src/_assets/scss/page-front.scss

@@ -42,6 +42,93 @@
     font-size: $font-size-h3;
 }
 
+.roadmap {
+    border-left: .2rem solid $brand-02;
+    margin-left: $spacer * 2;
+    padding-left: $spacer;
+    width: 100%;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 2;
+
+    @media ($screen-sm) {
+        margin-left: $spacer * 3;
+        padding-left: 0;
+    }
+
+    @media ($screen-md) {
+        margin-left: 0;
+        border-left: 0;
+        border-bottom: .2rem solid $brand-02;
+
+        .row {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+}
+
+.roadmap__step {
+    font-size: $font-size-small;
+    position: relative;
+    margin-bottom: $spacer * 2;
+
+    @media ($screen-md) {
+        text-align: center;
+        margin-bottom: 0;
+        padding-left: $spacer / 2;
+        padding-right: $spacer / 2;
+    }
+
+    &:after {
+        content: '\2714';
+        color: transparent;
+        text-align: center;
+        font-size: $font-size-mini;
+        line-height: 1.8;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        display: inline-block;
+        background: $brand-05;
+        border: .15rem solid $brand-02;
+        position: absolute;
+        left: -2.85rem;
+        top: 0;
+
+        @media ($screen-md) {
+            position: relative;
+            left: auto;
+            top: auto;
+            bottom: -.85rem;
+        }
+    }
+
+    &.is-complete {
+        &:after {
+            color: #fff;
+            background: adjust-hue($brand-01, 170%);
+        }
+    }
+
+    &.is-progress {
+        &:after {
+            background: $brand-07;
+        }
+    }
+}
+
+.roadmap__net {
+    margin-bottom: 0;
+}
+
+.roadmap__target {
+    color: $brand-07;
+}
+
+
+//
+// Connect
+//
 .articles {
     display: flex;
     flex-wrap: wrap;

_src/_data/content-front.yml

@@ -30,7 +30,25 @@ foundation:
 roadmap:
     title: "Roadmap"
     description: "The IPDB rollout plan follows six steps. First, a test network for demos, then for invited users, and then for the general public. When the test phase is complete, a production network will be launched in the same sequence."
-
+    steps:
+        - net: Test net
+          target: Demo app
+          status: complete
+        - net: Test net
+          target: Invited users
+          status: complete
+        - net: Test net
+          target: General public
+          status: complete
+        - net: Production net
+          target: Demo app
+          status: progress
+        - net: Production net
+          target: Invited users
+          status: planned
+        - net: Production net
+          target: General public
+          status: planned
 
 getstarted:
     title: "Get started"

_src/index.html

@@ -100,11 +100,25 @@ css: page-front
             <h1 class="section__title">{{ content.roadmap.title }}</h1>
             <p class="section__description">{{ content.roadmap.description }}</p>
         </header>
+    </div>
 
-        <div class="roadmap">
+    <div class="roadmap">
+        <div class="row">
+
+            {% for step in content.roadmap.steps %}
+
+                {% assign status = step.status %}
+
+                <div class="roadmap__step is-{{ status }}">
+                    <p class="roadmap__net">{{ step.net }}</p>
+                    <p class="roadmap__target">{{ step.target }}</p>
+                </div>
+
+            {% endfor %}
 
         </div>
     </div>
+
 </section>