From 01ad1e37edf6d94e431f14266807a92eae5da21c Mon Sep 17 00:00:00 2001
From: Fernando Toledo <fguerrero@google.com>
Date: Thu, 11 Oct 2018 16:16:59 -0700
Subject: [PATCH 1/2] WIP

This is a WIP.
---
 src/_assets/css/_bootstrap_adjust.scss |  9 +++++++--
 src/_assets/css/_header.scss           |  2 +-
 src/development/ui/widgets-catalog.md  | 20 +++++++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/_assets/css/_bootstrap_adjust.scss b/src/_assets/css/_bootstrap_adjust.scss
index d8905d0c921..6a09f203e3d 100644
--- a/src/_assets/css/_bootstrap_adjust.scss
+++ b/src/_assets/css/_bootstrap_adjust.scss
@@ -57,9 +57,14 @@ a.card {
   padding: bs-spacer(4) 0;
 }
 
-.nav-tabs .nav-link.active {
+.nav-tabs .nav-link,
+.nav-tabs .nav-link:hover {
   border: none;
-  border-bottom: 2px solid $site-color-primary;
+  border-bottom: 2px solid transparent;
+}
+
+.nav-tabs .nav-link.active {
+  border-color: $site-color-primary;
 }
 
 @mixin pre-defaults {
diff --git a/src/_assets/css/_header.scss b/src/_assets/css/_header.scss
index 68758e4df24..68fa58efdf6 100644
--- a/src/_assets/css/_header.scss
+++ b/src/_assets/css/_header.scss
@@ -30,7 +30,7 @@
 
     .btn {
       @include media-breakpoint-up(md) {
-        margin-left: bs-spacer(4);
+        margin-right: bs-spacer(4);
       }
     }
 
diff --git a/src/development/ui/widgets-catalog.md b/src/development/ui/widgets-catalog.md
index d7e7074b98a..e7f306b9819 100644
--- a/src/development/ui/widgets-catalog.md
+++ b/src/development/ui/widgets-catalog.md
@@ -9,10 +9,20 @@ platform, and interactive widgets.
 In addition to browsing widgets by category,
 you can also see all the widgets in the [Flutter widget index](/api-and-reference/widgets).
 
+<div>
 {% for section in site.data.catalog.index %}
-- ### [{{section.name}}](/api-and-reference/widgets/{{section.id}})
-  {:.catalog-category-title}
-
-  {{section.description}}
-{:.card}
+    {% capture modulo3 %}{{ forloop.index0 | modulo:3 }}{% endcapture %}
+    {% if modulo3 == '0' %}
+        <div class="card-deck">
+    {% endif %}
+            <a class="card" href="/development/ui/widgets/{{section.id}}">
+                <div class="card-body">
+                    <header class="card-title">{{section.name}}</header>
+                    <p class="card-text">{{section.description}}</p>
+                </div>
+            </a>
+    {% if modulo3 == '2' or forloop.last %}
+        </div>
+    {% endif %}
 {% endfor %}
+</div>

From 3d0dbb0b2df6d3df94e99877a8229e6e7b1b85df Mon Sep 17 00:00:00 2001
From: Aawaz Gyawali <awazgyawali@gmail.com>
Date: Fri, 12 Oct 2018 11:50:36 +0545
Subject: [PATCH 2/2] Added DropdownButton to the widget catalog

---
 src/_data/catalog/widgets.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/_data/catalog/widgets.json b/src/_data/catalog/widgets.json
index 19c4a499b1a..4db47fcf531 100644
--- a/src/_data/catalog/widgets.json
+++ b/src/_data/catalog/widgets.json
@@ -1608,5 +1608,17 @@
     ],
     "link": "https://docs.flutter.io/flutter/widgets/AnimatedWidgetBaseState-class.html",
     "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
+  },
+  {
+    "name": "DropdownButton",
+    "description": "A input field to choose an item from a list.",
+    "categories": [
+      "Material Components"
+    ],
+    "subcategories": [
+      "Input and selections"
+    ],
+    "link": "https://docs.flutter.io/flutter/widgets/DropdownButton-class.html",
+    "image": "<img alt='' src='/images/catalog-widget-placeholder.png'>"
   }
 ]