treehouse · mbignell · Sep 11, 2018 · Sep 12, 2018 · Sep 13, 2018 · Sep 13, 2018
diff --git a/_data/navs/atoms.yml b/_data/navs/atoms.yml
@@ -1,35 +1,35 @@
 filename: atoms
-name: Atoms
+name: Utilities
 pages:
-  - slug: /typography.html
-    name: Typography
-
-  - slug: /grid.html
-    name: Grid
-
-  - slug: /block-grid.html
-    name: Block Grid
-
-  - slug: /layout.html
-    name: Layout
-
-  - slug: /flexbox.html
-    name: Flex Box
+  - slug: /borders.html
+    name: Borders
 
   - slug: /buttons.html
     name: Buttons
 
   - slug: /colors.html
     name: Colors
 
-  - slug: /borders.html
-    name: Borders
+  - slug: /flexbox.html
+    name: Flex Box
 
   - slug: /forms.html
     name: Forms
 
+  - slug: /grid.html
+    name: Grid
+
+  - slug: /block-grid.html
+    name: Block Grid
+
+  - slug: /layout.html
+    name: Layout
+
   - slug: /icons.html
     name: Icons
 
   - slug: /tables.html
     name: Tables
+
+  - slug: /typography.html
+    name: Typography
diff --git a/_data/navs/components.yml b/_data/navs/components.yml
@@ -0,0 +1,8 @@
+filename: components
+name: Components
+pages:
+  - slug: /#
+    name: Coming Soon
+
+  - slug: /cards.html
+    name: Cards
diff --git a/_data/navs/examples.yml b/_data/navs/examples.yml
@@ -0,0 +1,15 @@
+filename: examples
+name: Examples
+pages:
+
+  - slug: /examples/library.html
+    name: Library
+
+  - slug: /examples/syllabus.html
+    name: Course Syllabus
+
+  - slug: /examples/community.html
+    name: Community
+
+  - slug: /examples/support.html
+    name: Support
diff --git a/_data/navs/modules.yml b/_data/navs/modules.yml
diff --git a/_includes/component-examples/alert-banner.html b/_includes/component-examples/alert-banner.html
@@ -0,0 +1,15 @@
+<div class="alert-banner alert-banner--with-icon alert-banner--warning flex-block-xs flex-justify-between-xs flex-item-center-xs" data-featurette="alert" id="featurette-2">
+  <p>
+    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+       viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18,22H4c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h14c2.2,0,4,1.8,4,4v14
+      C22,20.2,20.2,22,18,22z M17,2H5C3.7,2,2.6,2.8,2.2,4h17.6C19.4,2.8,18.3,2,17,2z M20,6H2v11c0,1.7,1.3,3,3,3h12c1.7,0,3-1.3,3-3V6z
+       M13.9,16.6c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l2.1-2.1l-2.1-2.1c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l2.8,2.8
+      c0.4,0.4,0.4,1,0,1.4L13.9,16.6z M9.5,16.5c-0.4,0.4-1,0.4-1.4,0l-2.8-2.8c-0.4-0.4-0.4-1,0-1.4l2.8-2.8c0.4-0.4,1-0.4,1.4,0
+      c0.4,0.4,0.4,1,0,1.4L7.4,13l2.1,2.1C9.9,15.5,9.9,16.1,9.5,16.5z"/>
+    </svg>
+    <strong>Nice.</strong> This is an Alert with the :warning class set</p>
+  <button class="button--icon-only" data-close-alert="" title="Close">
+    <svg viewBox="0 0 12 12"><path d="m8.2 6 3.3-3.3c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-3.3 3.3-3.3-3.3c-.6-.6-1.6-.6-2.2 0s-.6 1.6 0 2.2l3.3 3.3-3.3 3.3c-.6.6-.6 1.6 0 2.2s1.6.6 2.2 0l3.3-3.3 3.3 3.3c.6.6 1.6.6 2.2 0s.6-1.6 0-2.2z"/></svg>
+  </button>
+</div>
diff --git a/_includes/component-examples/card--track.html b/_includes/component-examples/card--track.html
@@ -0,0 +1,63 @@
+<li class="col col-50-md col-33-lg">
+  <div class="card card--track">
+     <div class="card__header flex-block-xs flex-justify-between-xs flex-item-center-xs bg-gray-darker text-color-white bold p-tb-1-xs p-lr-2-xs round-t">
+       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          width="32px" height="32px" viewBox="0 0 82 90" style="enable-background:new 0 0 82 90;" xml:space="preserve">
+         <path style="fill:#FFFFFF;" d="M71.574,17.411c-2.879-1.628-7.478,0.99-10.27,5.848l-5.056,8.795
+           c-1.847,3.656-1.594,8.01,0.749,11.371l0.147,0.212c2.343,3.361,5.485,6.468,6.525,7.575c0.61,0.652,1.078,1.456,1.335,2.376
+           c0.854,3.054-0.929,6.221-3.982,7.076c-3.054,0.853-6.222-0.929-7.075-3.982c-0.215-0.767-0.263-1.54-0.166-2.283
+           c0.164-1.261-0.241-3.316-2.05-5.334c-1.808-2.016-5.506,1.793-6.701,5.711l-0.055,0.18c-1.196,3.919-1.95,7.337-1.724,7.666
+           c0.134,0.197,0.259,0.402,0.374,0.618c1.677,3.156,0.478,7.075-2.677,8.752c-3.156,1.677-7.075,0.478-8.752-2.678
+           c-1.678-3.156-0.479-7.073,2.678-8.752c0.141-0.075,0.285-0.144,0.429-0.207c0.242-0.107,0.925-1.754,1.518-3.699
+           c0.594-1.946,1.075-3.524,1.075-3.524c0.063-0.206,0.119-0.411,0.169-0.614l3.194-11.404l-3.416,7.011
+           c-0.405-1.332-1.074-1.379-2.54-0.33c-0.884,0.633-2.346,1.878-3.06,2.389c-1.341,0.959-2.463,2.824-3.057,3.966
+           c-0.349,0.672-0.839,1.285-1.464,1.791c-2.445,1.985-6.037,1.611-8.021-0.836c-1.984-2.444-1.61-6.035,0.835-8.02
+           c0.717-0.582,1.533-0.96,2.377-1.144c1.437-0.312,6.323-3.297,9.267-5.404c0.527-0.377,0.97-0.734,1.329-1.064l7.861-5.97
+           l-6.845,3.7c0,0-0.697-0.071-1.551,0.024c-2.505,0.279-5.086,0.632-5.573,1.252c-0.288,0.367-0.631,0.699-1.029,0.985
+           c-2.284,1.646-5.471,1.128-7.117-1.157c-1.646-2.286-1.128-5.472,1.157-7.118c0.942-0.679,2.038-0.989,3.115-0.959
+           c1.832,0.05,6.654,1.028,10.687,0.314l1.036-0.183c4.034-0.715,8.864-4.227,10.788-7.844c0,0,1.884-3.31,4.208-7.393
+           c2.325-4.082,2.153-8.555-0.383-9.988l-4.592-2.596c-2.316-1.309-6.109-1.312-8.427-0.005L5.215,20.364
+           C2.897,21.67,1,24.918,1,27.58V62.42c0,2.662,1.897,5.909,4.215,7.216l31.627,17.829c2.318,1.308,6.111,1.306,8.427-0.005
+           l31.518-17.819C79.104,68.332,81,65.083,81,62.42V27.58c0-2.662-1.896-5.911-4.213-7.221C76.787,20.359,74.452,19.039,71.574,17.411
+           z"/>
+       </svg>
+       <ul class="card__stages">
+         <li class="complete">1</li>
+         <li class="current">2</li>
+         <li>3</li>
+         <li>4</li>
+         <li>5</li>
+         <li>6</li>
+         <li>3</li>
+         <li>4</li>
+         <li>5</li>
+         <li>6</li>
+         <li>3</li>
+         <li>4</li>
+         <li>5</li>
+         <li>6</li>
+         <li>3</li>
+         <li>4</li>
+         <li>5</li>
+         <li>6</li>
+       </ul>
+        <span class="card__estimate" title="You have approximately 2 hours left of 2 hours to complete this activity.">2 hours left</span>
+     </div>
+     <div class="card__body p-lr-2-xs p-tb-1-xs">
+       <p class="bold text-color-light text-6-xs m-b-025-md">
+         Concept
+       </p>
+       <h3 class="m-b-1-xs text-4-xs">
+         CSS Basics
+       </h3>
+       <p class="card__description text-6-xs">
+         Wow this is the full text of a card it's pretty cool and goes on two whole lines and then stops!!
+       </p>
+     </div>
+     <div class="card__actions p-t-1-xs p-b-2-xs p-lr-2-xs">
+       <button class="button button--small-xs button--primary-blue">
+         Resume
+       </button>
+     </div>
+  </div>
+</li>
diff --git a/_includes/component-examples/card.html b/_includes/component-examples/card.html
@@ -0,0 +1,51 @@
+<li class="col col-50-md col-33-lg">
+  <div class="card">
+     <div class="card__header flex-block-xs flex-justify-between-xs flex-item-center-xs bg-gray-dark text-color-white bold p-tb-1-xs p-lr-2-xs round-t">
+       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          width="32px" height="32px" viewBox="0 0 82 90" style="enable-background:new 0 0 82 90;" xml:space="preserve">
+         <path style="fill:#FFFFFF;" d="M71.574,17.411c-2.879-1.628-7.478,0.99-10.27,5.848l-5.056,8.795
+           c-1.847,3.656-1.594,8.01,0.749,11.371l0.147,0.212c2.343,3.361,5.485,6.468,6.525,7.575c0.61,0.652,1.078,1.456,1.335,2.376
+           c0.854,3.054-0.929,6.221-3.982,7.076c-3.054,0.853-6.222-0.929-7.075-3.982c-0.215-0.767-0.263-1.54-0.166-2.283
+           c0.164-1.261-0.241-3.316-2.05-5.334c-1.808-2.016-5.506,1.793-6.701,5.711l-0.055,0.18c-1.196,3.919-1.95,7.337-1.724,7.666
+           c0.134,0.197,0.259,0.402,0.374,0.618c1.677,3.156,0.478,7.075-2.677,8.752c-3.156,1.677-7.075,0.478-8.752-2.678
+           c-1.678-3.156-0.479-7.073,2.678-8.752c0.141-0.075,0.285-0.144,0.429-0.207c0.242-0.107,0.925-1.754,1.518-3.699
+           c0.594-1.946,1.075-3.524,1.075-3.524c0.063-0.206,0.119-0.411,0.169-0.614l3.194-11.404l-3.416,7.011
+           c-0.405-1.332-1.074-1.379-2.54-0.33c-0.884,0.633-2.346,1.878-3.06,2.389c-1.341,0.959-2.463,2.824-3.057,3.966
+           c-0.349,0.672-0.839,1.285-1.464,1.791c-2.445,1.985-6.037,1.611-8.021-0.836c-1.984-2.444-1.61-6.035,0.835-8.02
+           c0.717-0.582,1.533-0.96,2.377-1.144c1.437-0.312,6.323-3.297,9.267-5.404c0.527-0.377,0.97-0.734,1.329-1.064l7.861-5.97
+           l-6.845,3.7c0,0-0.697-0.071-1.551,0.024c-2.505,0.279-5.086,0.632-5.573,1.252c-0.288,0.367-0.631,0.699-1.029,0.985
+           c-2.284,1.646-5.471,1.128-7.117-1.157c-1.646-2.286-1.128-5.472,1.157-7.118c0.942-0.679,2.038-0.989,3.115-0.959
+           c1.832,0.05,6.654,1.028,10.687,0.314l1.036-0.183c4.034-0.715,8.864-4.227,10.788-7.844c0,0,1.884-3.31,4.208-7.393
+           c2.325-4.082,2.153-8.555-0.383-9.988l-4.592-2.596c-2.316-1.309-6.109-1.312-8.427-0.005L5.215,20.364
+           C2.897,21.67,1,24.918,1,27.58V62.42c0,2.662,1.897,5.909,4.215,7.216l31.627,17.829c2.318,1.308,6.111,1.306,8.427-0.005
+           l31.518-17.819C79.104,68.332,81,65.083,81,62.42V27.58c0-2.662-1.896-5.911-4.213-7.221C76.787,20.359,74.452,19.039,71.574,17.411
+           z"/>
+       </svg>
+       <ul class="card__stages">
+         <li class="complete">1</li>
+         <li class="complete">2</li>
+         <li class="current">2</li>
+         <li>4</li>
+         <li>5</li>
+         <li>6</li>
+       </ul>
+        <span class="card__estimate" title="You have approximately 2 hours left of 2 hours to complete this activity.">2 hours left</span>
+     </div>
+     <div class="card__body p-lr-2-xs p-tb-1-xs">
+       <p class="bold text-color-light text-6-xs m-b-025-md">
+         Concept
+       </p>
+       <h3 class="m-b-1-xs text-4-xs">
+         JavaScript Basics
+       </h3>
+       <p class="card__description text-6-xs">
+         Wow this is the full text of a card it's pretty cool and goes on two whole lines and then stops!!
+       </p>
+     </div>
+     <div class="card__actions p-t-1-xs p-b-2-xs p-lr-2-xs">
+       <button class="button button--small-xs button--primary-blue">
+         Resume
+       </button>
+     </div>
+  </div>
+</li>
diff --git a/_includes/component-examples/control-bar.html b/_includes/component-examples/control-bar.html
@@ -0,0 +1,5 @@
+<nav class="control-bar">
+  <a class="current" href="">Forum</a>
+  <a href="">Leaderboard</a>
+  <a class="m-l-auto-md" href="">Code of Conduct</a>
+</nav>
diff --git a/_includes/component-examples/header-nav.html b/_includes/component-examples/header-nav.html
@@ -0,0 +1,73 @@
+<header class="header-nav" role="banner">
+  <div class="header-nav-container col-max">
+    <button class="hamburger-button hamburger-button-inverse" aria-label="Navigation Menu" data-hamburger-button="">
+      <span class="hamburger"></span>
+    </button>
+    <!-- skip link-->
+    <nav class="header-nav__main" role="navigation">
+      <ul>
+        <li>
+          <a class="header-nav__home" href="">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+             width="32px" height="32px" viewBox="0 0 82 90" style="enable-background:new 0 0 82 90;" xml:space="preserve">
+            <path style="" d="M71.574,17.411c-2.879-1.628-7.478,0.99-10.27,5.848l-5.056,8.795
+              c-1.847,3.656-1.594,8.01,0.749,11.371l0.147,0.212c2.343,3.361,5.485,6.468,6.525,7.575c0.61,0.652,1.078,1.456,1.335,2.376
+              c0.854,3.054-0.929,6.221-3.982,7.076c-3.054,0.853-6.222-0.929-7.075-3.982c-0.215-0.767-0.263-1.54-0.166-2.283
+              c0.164-1.261-0.241-3.316-2.05-5.334c-1.808-2.016-5.506,1.793-6.701,5.711l-0.055,0.18c-1.196,3.919-1.95,7.337-1.724,7.666
+              c0.134,0.197,0.259,0.402,0.374,0.618c1.677,3.156,0.478,7.075-2.677,8.752c-3.156,1.677-7.075,0.478-8.752-2.678
+              c-1.678-3.156-0.479-7.073,2.678-8.752c0.141-0.075,0.285-0.144,0.429-0.207c0.242-0.107,0.925-1.754,1.518-3.699
+              c0.594-1.946,1.075-3.524,1.075-3.524c0.063-0.206,0.119-0.411,0.169-0.614l3.194-11.404l-3.416,7.011
+              c-0.405-1.332-1.074-1.379-2.54-0.33c-0.884,0.633-2.346,1.878-3.06,2.389c-1.341,0.959-2.463,2.824-3.057,3.966
+              c-0.349,0.672-0.839,1.285-1.464,1.791c-2.445,1.985-6.037,1.611-8.021-0.836c-1.984-2.444-1.61-6.035,0.835-8.02
+              c0.717-0.582,1.533-0.96,2.377-1.144c1.437-0.312,6.323-3.297,9.267-5.404c0.527-0.377,0.97-0.734,1.329-1.064l7.861-5.97
+              l-6.845,3.7c0,0-0.697-0.071-1.551,0.024c-2.505,0.279-5.086,0.632-5.573,1.252c-0.288,0.367-0.631,0.699-1.029,0.985
+              c-2.284,1.646-5.471,1.128-7.117-1.157c-1.646-2.286-1.128-5.472,1.157-7.118c0.942-0.679,2.038-0.989,3.115-0.959
+              c1.832,0.05,6.654,1.028,10.687,0.314l1.036-0.183c4.034-0.715,8.864-4.227,10.788-7.844c0,0,1.884-3.31,4.208-7.393
+              c2.325-4.082,2.153-8.555-0.383-9.988l-4.592-2.596c-2.316-1.309-6.109-1.312-8.427-0.005L5.215,20.364
+              C2.897,21.67,1,24.918,1,27.58V62.42c0,2.662,1.897,5.909,4.215,7.216l31.627,17.829c2.318,1.308,6.111,1.306,8.427-0.005
+              l31.518-17.819C79.104,68.332,81,65.083,81,62.42V27.58c0-2.662-1.896-5.911-4.213-7.221C76.787,20.359,74.452,19.039,71.574,17.411
+              z"/>
+            </svg>
+            <span>Home</span>
+          </a>
+        </li>
+        <li><a href="tracks.html">Tracks</a></li>
+        <li><a href="library.html">Library</a></li>
+        <li><a href="community.html">Community</a></li>
+        <li><a href="support.html">Support</a></li>
+      </ul>
+    </nav>
+    <nav class="header-nav__secondary" role="navigation">
+      <ul>
+        <li><a href="">My Org</a></li>
+        <li class="header-nav__workspaces"><a href="">Workspaces</a></li>
+        <li>
+          <a class="header-nav__profile" href="">
+            13,230
+            <div id="avatar-581710" class="avatar-staff header-nav__profile-avatar avatar-deep-blue-bg avatar avatar--small">
+              <div class="avatar-container">
+                <img alt="Tyreek Beahan" class="avatar-image" src="https://secure.gravatar.com/avatar/7a7ed453a86495e97a7271b4923f2e2a?s=72&amp;d=mm&amp;r=pg">
+              </div>
+            </div>
+            <svg class="chevron-icon header-nav__chevron" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5">
+              <g id="chevron-icon">
+                <g>
+                	<path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path>
+                </g>
+              </g>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a data-notifications-link="" data-dropdown-toggle="notifications" data-analytics-link="Notifications" data-analytics-action="clicked:internal" data-analytics-event="application nav link" data-analytics-path="/notifications" class="header-nav-link " href="/notifications">
+              <svg class="header-nav__notifications notifications-icon" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 12">
+                <g id="notifications-icon">
+                  <path d="M11.7,9.4c-0.2-0.3-0.5-0.4-0.9-0.6c0,0,0,0-0.1,0C9.3,7.5,10,6.5,10,5.1c0-1.3-1.3-3.4-3-3.9     c0,0,0-0.1,0-0.1C7,0.5,6.6,0,6,0C5.4,0,5,0.5,5,1.1c0,0.1,0,0.1,0,0.2C3.4,1.9,2.2,3.8,2.2,5.1c0,1.3,0.6,2.4-0.7,3.6     C1.2,8.9,1,9,0.7,9.1C0.6,9.2,0.4,9.3,0.3,9.4C0.1,9.6,0,9.8,0,10.1c0,0.3,0.1,0.5,0.3,0.7c0.2,0.3,0.5,0.4,0.9,0.6     c0.5,0.2,1.2,0.4,2.1,0.5C4.1,11.9,5,12,6,12c1.5,0,2.9-0.1,3.9-0.4c0.5-0.1,1-0.3,1.3-0.5c0.2-0.1,0.3-0.2,0.5-0.4     c0.1-0.2,0.3-0.4,0.3-0.7C12,9.8,11.9,9.6,11.7,9.4z M10.4,10.2c-0.4,0.2-1,0.3-1.8,0.4C7.9,10.7,7,10.7,6,10.7     c-1.5,0-2.8-0.1-3.7-0.4c-0.4-0.1-0.7-0.2-0.9-0.3c0,0,0.1,0,0.1-0.1c0.4-0.2,1-0.3,1.8-0.4c0.5-0.1,1.1-0.1,1.7-0.1     c0.1,0.4,0.5,0.8,0.9,0.8c0.5,0,0.8-0.3,0.9-0.8c1.1,0,2,0.2,2.7,0.3c0.4,0.1,0.7,0.2,0.9,0.3C10.5,10.1,10.5,10.2,10.4,10.2z"></path>
+                </g>
+              </svg>
+              <!-- <span class="header-nav-item-notifications-text">Notifications</span> -->
+          </a>
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/_includes/component-examples/search-bar.html b/_includes/component-examples/search-bar.html
@@ -0,0 +1,63 @@
+<div class="control-bar control-bar--search">
+  <form class="control-search search-form control-bar__search">
+    <label for="search">
+      <svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path d="M15.6,13.5l-4-4c0.6-1,1-2.1,1-3.3C12.5,2.8,9.8,0,6.3,0C2.9,0,0,2.8,0,6.2s2.8,6.2,6.3,6.2c1.2,0,2.2-0.3,3.1-0.9l4,4.1
+        	c0.5,0.5,1.5,0.5,2.1,0C16.1,15,16.1,14.1,15.6,13.5z M6.5,9.4c-1.8,0-3.3-1.5-3.3-3.2C3.2,4.4,4.7,3,6.5,3s3.3,1.5,3.3,3.2
+        	C9.7,8,8.3,9.4,6.5,9.4z"/>
+      </svg>
+    </label>
+    <input type="text" class="search input-text" id="q" placeholder="Search Courses, Conferences and Teachers..."></input>
+  </form>
+
+  <ul class="control-bar__dropdowns">
+
+    <!-- Sorting -->
+    <li id="sort" class="dropdown-parent filter-container" data-featurette="filter-list">
+      <a class="dropdown-parent-label sort" data-filter-list-current-value="">Newest</a>
+      <ul class="sorting-container dropdown-child filter-dropdown" style="display: none;">
+        <li><a data-filter-value="" class="selected">Newest</a></li>
+        <li><a data-filter-value="oldest" class="">Oldest</a></li>
+        <li><a data-filter-value="title" class="">Alphabetical</a></li>
+        <li><a data-filter-value="difficulty" class="">Difficulty</a></li>
+      </ul>
+    </li>
+
+      <!-- Filtering -->
+      <li id="type" class="dropdown-parent filter-container " data-featurette="filter-list">
+        <a class="dropdown-parent-label type" data-filter-list-current-value="">All Types</a>
+        <ul class="sorting-container dropdown-child filter-dropdown" style="display: none;">
+          <li><a data-filter-value="" class="selected">All Types</a></li>
+          <li><a data-filter-value="course">Course</a></li>
+          <li><a data-filter-value="workshop">Workshop</a></li>
+          <li><a data-filter-value="practice">Practice</a></li>
+          <li><a data-filter-value="conference">Conference</a></li>
+          <li><a data-filter-value="bonus">Bonus Series</a></li>
+        </ul>
+      </li>
+
+    <!-- Courses -->
+    <li id="topic" class="dropdown-parent filter-container" data-featurette="filter-list">
+      <a class="dropdown-parent-label course" data-filter-list-current-value="">All Topics</a>
+      <ul class="dropdown-child filter-dropdown" style="display: none;">
+        <li><a itemprop="url" href="" data-filter-value="" class="selected">All Topics</a></li>
+          <li class="android">
+            <a data-filter-value="android">
+              <span class="topic-color" style="color:#30826C">
+              •
+              </span>
+              Android
+            </a>
+          </li>
+          <li class="apis">
+            <a data-filter-value="apis">
+              <span class="topic-color" style="color:#008297">
+              •
+              </span>
+               APIs
+            </a>
+          </li>
+      </ul><!-- /child -->
+    </li><!-- /parent -->
+  </ul>
+</div>