diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 0e07b58fb..0115885eb 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -161,6 +161,9 @@ docs:
     charts: 
       title: Charts
       url: docs/charts.html
+    dropdowns:
+      title: Dropdowns
+      url: docs/dropdowns.html
     divider: 
       title: Divider
       url: docs/divider.html
diff --git a/pages/_docs/dropdowns.md b/pages/_docs/dropdowns.md
new file mode 100644
index 000000000..410202862
--- /dev/null
+++ b/pages/_docs/dropdowns.md
@@ -0,0 +1,100 @@
+---
+title: Dropdowns
+description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
+bootstrap-link: components/dropdowns
+toc: true
+---
+
+## Default dropdown
+
+Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can do this:
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown divider
+
+Separate groups of related menu items with a divider.
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true separated=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Active state
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true active=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Disabled state
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true disabled=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown header
+
+Add a header to label sections of actions in any dropdown menu.
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true header=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown with icons
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true icons=true header=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown with arrow
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true arrow=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown with badge
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true badge=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown with checkboxes
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true check=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true radio=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dark dropdown
+
+{% capture code %}
+{% include ui/dropdown-menu.html show=true dark=true header=true icons=true arrow=true %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
+## Dropdown with card content
+
+{% capture code %}
+{% include ui/button.html color="secondary" text="Button" %}
+<div class="dropdown{% hide %} show{% endhide %}">
+    <a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
+    <div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">
+        {% include cards/blog-single.html type="image" %}
+    </div>
+</div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list align-items-start" %}
\ No newline at end of file
diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md
index 9ae22e1a4..799ca132d 100644
--- a/pages/_docs/progress.md
+++ b/pages/_docs/progress.md
@@ -1,7 +1,7 @@
 ---
 title: Progress
 description: A progress bar can be used to show a user how far along he is in a process.
-bootstrap-link: components/progress/
+bootstrap-link: components/progress
 done: true
 ---
 
diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md
index 99bea20bf..3b696df15 100644
--- a/pages/_docs/typography.md
+++ b/pages/_docs/typography.md
@@ -24,23 +24,23 @@ bootstrap-link: content/typography/
 ### Semantic text elements
 
 {% capture code %}
-<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
-<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
-<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
-<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
-<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
-<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
-<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
-<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
-<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
-<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
-<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
-<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
-Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
-Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
-<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
-<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
-<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
+<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
+<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
+<cite>Citation</cite>{% hide %} <code class="ml-2">cite</code><br/>{% endhide %}
+<code>Hello World!</code>{% hide %} <code class="ml-2">code</code><br/>{% endhide %}
+<del>Deleted</del>{% hide %} <code class="ml-2">del</code><br/>{% endhide %}
+<em>Emphasis</em>{% hide %} <code class="ml-2">em</code><br/>{% endhide %}
+<i>Italic</i>{% hide %} <code class="ml-2">i</code><br/>{% endhide %}
+<ins>Inserted</ins>{% hide %} <code class="ml-2">ins</code><br/>{% endhide %}
+<kbd>Ctrl + S</kbd>{% hide %} <code class="ml-2">kbd</code><br/>{% endhide %}
+<mark>Highlighted</mark>{% hide %} <code class="ml-2">mark</code><br/>{% endhide %}
+<s>Strikethrough</s{% hide %}> <code class="ml-2">s</code><br/>{% endhide %}
+<samp>Sample</samp>{% hide %} <code class="ml-2">samp</code><br/>{% endhide %}
+Text <sub>Subscripted</sub>{% hide %} <code class="ml-2">sub</code><br/>{% endhide %}
+Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% endhide %}
+<time>20:00</time>{% hide %} <code class="ml-2">time</code><br/>{% endhide %}
+<u>Underline</u>{% hide %} <code class="ml-2">u</code><br/>{% endhide %}
+<var>x</var> = <var>y</var> + 2{% hide %} <code class="ml-2">var</code><br/>{% endhide %}
 {% endcapture %}
 {% include example.html code=code %}
 
diff --git a/pages/_includes/example.html b/pages/_includes/example.html
index 2d5b069d4..993ecf674 100644
--- a/pages/_includes/example.html
+++ b/pages/_includes/example.html
@@ -1,9 +1,14 @@
+{% assign demo-code = code %}
+
+{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
+{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
+
 <div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
 	<div class="example-content">
 		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
 		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
 
-		{{ code }}
+		{{ demo-code }}
 
 		{% if include.columns %}</div>{% endif %}
 		{% if include.wrapper %}</div>{% endif %}
@@ -18,6 +23,7 @@
 {% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
 {% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
 {% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
+{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
 {% assign code = code | htmlbeautifier %}
 
 <div class="example-code">
diff --git a/pages/_includes/ui/dropdown-menu.html b/pages/_includes/ui/dropdown-menu.html
index 581c51c3b..4324a18c8 100644
--- a/pages/_includes/ui/dropdown-menu.html
+++ b/pages/_includes/ui/dropdown-menu.html
@@ -1,25 +1,26 @@
 <div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} position-relative d-inline-block{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
-   {% if include.check or include.radio %}
-      {% for i in (1..3) %}
-      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
-      {% endfor %}
-   {% elsif include.type == 'text' %}
+	{% if include.check or include.radio %}
+		{% for i in (1..3) %}
+		<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
+		{% endfor %}
+	{% elsif include.type == 'text' %}
 
-   {% else %}
-      {% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
-      <a class="dropdown-item" href="#">
-         {% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
-         Action
-         {% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
-      </a>
-      <a class="dropdown-item" href="#">
-         {% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
-      </a>
-      {% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
-      {% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
-      {% if include.separated %}
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
-      {% endif %}
-   {% endif %}
+	{% else %}
+		{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
+		<a class="dropdown-item" href="#">
+			{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
+			Action
+			{% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
+		</a>
+		<a class="dropdown-item" href="#">
+			{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
+			{% if include.badge %}<span class="badge bg-green ml-auto"></span>{% endif %}
+		</a>
+		{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
+		{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
+		{% if include.separated %}
+		<div class="dropdown-divider"></div>
+		<a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
+		{% endif %}
+	{% endif %}
 </div>
diff --git a/pages/_plugins/jekyll-tags.rb b/pages/_plugins/jekyll-tags.rb
index 4eff94f8c..671c457c4 100644
--- a/pages/_plugins/jekyll-tags.rb
+++ b/pages/_plugins/jekyll-tags.rb
@@ -3,6 +3,18 @@ require 'pathname'
 
 module Jekyll
   module Tags
+    class Hide < Liquid::Block
+
+      def initialize(tag_name, text, tokens)
+        super
+        @text = text
+      end
+
+      def render(context)
+        '{% hide %}' + super.to_s + '{% endhide %}'
+      end
+    end
+
     class RemoveEmptyLines < Liquid::Block
 
       def initialize(tag_name, text, tokens)
@@ -63,4 +75,5 @@ end
 Liquid::Template.register_tag('removeemptylines', Jekyll::Tags::RemoveEmptyLines)
 Liquid::Template.register_tag('card', Jekyll::Tags::CardBlock)
 Liquid::Template.register_tag('docs_url', Jekyll::Tags::DocsUrl)
+Liquid::Template.register_tag('hide', Jekyll::Tags::Hide)
 
diff --git a/pages/tmp.html b/pages/tmp.html
index 63273496f..c22c6c831 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -4,8 +4,13 @@ menu: a.b.c
 
 <div class="row">
 	<div class="col-xl-4">
-		<div class="card card-body">
-
+		<div class="dropdown show">
+			<a href="#" class="btn btn-secondary">Dropdown</a>
+			<div class="dropdown-menu dropdown-menu-card show">
+				<div class="card">
+					<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur dolore dolores, earum explicabo id temporibus veritatis. Alias amet aperiam corporis dolore eos, iste magni non omnis perferendis, quos sed.</div>
+				</div>
+			</div>
 		</div>
 	</div>
 
diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss
index 93d5f2025..32c6af5e7 100644
--- a/scss/ui/_dropdowns.scss
+++ b/scss/ui/_dropdowns.scss
@@ -103,3 +103,13 @@
     }
   }
 }
+
+.dropdown-menu-card {
+  padding: 0;
+  border: 0;
+
+  >.card {
+    margin: 0;
+    box-shadow: none;
+  }
+}
\ No newline at end of file