diff --git a/docs/_assets/main.css b/docs/_assets/main.css
index 0870aa5c..9be795ed 100644
--- a/docs/_assets/main.css
+++ b/docs/_assets/main.css
@@ -546,21 +546,37 @@ body:not(.about) .mdl-navigation__link.download > button {
   border-spacing: 0;
   width: 100%;
 }
-.snippet-group .snippet-demos {
+.snippet-group .snippet-demos,
+.snippet-group .snippet-captions {
   display: table-row;
 }
 .snippet-group .snippet-demo .snippet-demo-container {
   text-align: left;
   display: inline-block;
 }
+.snippet-group .snippet-captions {
+  background-color: white;
+  height: 48px;
+}
 .snippet-group .snippet-demo,
-.snippet-group .snippet-demo-padding {
+.snippet-group .snippet-demo-padding,
+.snippet-group .snippet-caption,
+.snippet-group .snippet-caption-padding {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   margin: 0;
   padding: 0;
 }
+
+.snippet-group .snippet-caption {
+  font-size: 13px;
+  padding: 0px 40px;
+  white-space: nowrap;
+  text-align: center;
+  position: relative;
+}
+
 .snippet-group .snippet-demo {
   padding: 0px 40px 40px 40px;
 }
diff --git a/docs/_templates/snippets.html b/docs/_templates/snippets.html
index 954ee837..3beeed71 100644
--- a/docs/_templates/snippets.html
+++ b/docs/_templates/snippets.html
@@ -20,6 +20,15 @@
       {%- endfor %}
       <div class="snippet-demo-padding"></div>
     </div>
+    <div class="snippet-captions">
+      <div class="snippet-caption-padding"></div>
+      {% for snippet in snippet_group %}
+        <div class="snippet-caption">
+          {{ snippet.caption }}
+        </div>
+      {%- endfor %}
+      <div class="snippet-caption-padding"></div>
+    </div>
   </div>
   <div class="snippet-code">
     <pre class="language-markup codepen-button-enabled">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code><div class="codepen-extra-css">&lt;style&gt;{% set extra_css_file = "../../src/" + component_name + "/snippets/" + snippet.extra_codepen_css %}{% include extra_css_file ignore missing %}&lt;/style&gt;</div>{%- endfor %}{% if snippet_group.length !== 1 || !snippet_group[0].full_width %}<div class="codepen-extra-css">&lt;style&gt;