From b57682146ebffb49d91af2a4c0e0f5cf2ba978f6 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Wed, 10 Oct 2018 14:59:13 -0400
Subject: [PATCH] [dash] Install page: use cards for each OS

---
 src/_assets/css/_base.scss       |  2 ++
 src/get-started/install/index.md | 13 +++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/_assets/css/_base.scss b/src/_assets/css/_base.scss
index bd7c8ae33ac..462b061dfc2 100644
--- a/src/_assets/css/_base.scss
+++ b/src/_assets/css/_base.scss
@@ -106,3 +106,5 @@ dd {
   opacity: 0.5;
   vertical-align: top;
 }
+
+.fa-macos { @extend .fa-apple; }
diff --git a/src/get-started/install/index.md b/src/get-started/install/index.md
index 9cb705f9ec0..240688d2ca8 100644
--- a/src/get-started/install/index.md
+++ b/src/get-started/install/index.md
@@ -8,9 +8,18 @@ toc: false
 
 Select the operating system on which you are installing Flutter:
 
-{% for os in site.os-list -%}
-- [{{os}}](/get-started/install/{{os | downcase}})
+<div class="card-deck mb-8">
+{% for os in site.os-list %}
+  <a class="card" href="/get-started/install/{{os | downcase}}">
+    <div class="card-body">
+      <header class="card-title text-center m-0">
+        {{os}}
+        <i class="fab fa-{{os | downcase}}"></i>
+      </header>
+    </div>
+  </a>
 {% endfor %}
+</div>
 
 {{site.alert.important}}
   If you're in China, first read [Using Flutter in China][].