diff --git a/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html b/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html
new file mode 100644
index 0000000..f959654
--- /dev/null
+++ b/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html
@@ -0,0 +1,237 @@
+<p>A collapsible is a component to mark expandable and collapsible regions.
+  It has states, roles, attributes and behavior in accordance with guidelines given in
+  <a href="https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions">
+    Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions
+  </a>.
+</p>
+<article>
+  <button class="mdlext-js-collapsible" style="padding: 8px;">
+    <span>Click to toggle (button)</span>
+    <i class="mdlext-aria-expanded-more-less"></i>
+  </button>
+  <div class="mdlext-collapsible-group"><p>A collapsible region #1.1</p></div>
+  <div class="mdlext-collapsible-group"><p>A collapsible region #1.2</p></div>
+  <div class="mdlext-collapsible-group"><p>A collapsible region #1.3</p></div>
+</article>
+
+<article style="margin-top: 16px;">
+  <div class="mdlext-js-collapsible mdlext-collapsible" style="padding: 8px;">
+    <span>Click to toggle (div)</span>
+    <i class="mdlext-aria-expanded-more-less"></i>
+  </div>
+  <div class="mdlext-collapsible-region"><p>A collapsible region #2.1</p></div>
+  <div class="mdlext-collapsible-region"><p>A collapsible region #2.2</p></div>
+  <div class="mdlext-collapsible-region"><p>A collapsible region #2.3</p></div>
+</article>
+
+
+<style>
+  .mdl-card.demo-card,
+  .mdl-card.welcome-card {
+    min-height: 0;
+    width: auto;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    max-width: 640px;
+  }
+  .mdl-card.demo-card .mdl-card__media,
+  .mdl-card.welcome-card .mdl-card__media {
+    margin: 0;
+    text-align: center;
+  }
+  .mdl-card.demo-card .mdl-card__media > img,
+  .mdl-card.welcome-card .mdl-card__media > img {
+    max-width: 100%;
+    height: auto;
+  }
+  .mdl-card.demo-card .mdl-card__title,
+  .mdl-card.welcome-card .mdl-card__title {
+    /* Fix bug in _card.scss */
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    /* end fix */
+
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: 64px;
+  }
+  .mdl-card.demo-card .mdl-card__title:focus,
+  .mdl-card.welcome-card .mdl-card__title:focus {
+    /* Must focus ring must be inside title since mdl-card has overflow:hidden */
+    outline-offset: -4px;
+  }
+  .mdl-card.demo-card .mdl-card__title > *,
+  .mdl-card.welcome-card .mdl-card__title > * {
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    align-self: center;
+  }
+  .mdl-card.demo-card .mdl-card__supporting-text,
+  .mdl-card.welcome-card .mdl-card__supporting-text {
+    width: auto;
+  }
+  .mdl-card.demo-card .mdl-card__actions,
+  .mdl-card.welcome-card .mdl-card__actions {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .welcome-card > .mdl-card__title {
+    color: #fff;
+    height: 176px;
+    background: url('./assets/welcome_card.jpg') top / cover;
+  }
+  .welcome-card > .mdl-card__title[aria-expanded='false'] {
+    height: 64px;
+  }
+  .welcome-card > .mdl-card__title .mdl-card__title-text {
+    -webkit-align-self: flex-end;
+    -ms-flex-item-align: end;
+    align-self: flex-end;
+    padding-bottom: 16px;
+  }
+  .welcome-card > .mdl-card__title[aria-expanded='false'] .mdl-card__title-text {
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    align-self: center;
+    padding-bottom: 0;
+  }
+  .welcome-card > .mdl-card__menu {
+    color: #fff;
+  }
+
+  table.info {
+    width: 100%
+  }
+  table.info th {
+    padding-right: 40px;
+    vertical-align: middle;
+    text-align: left;
+    width: 120px;
+  }
+</style>
+
+<div class="welcome-card mdl-card mdl-shadow--2dp">
+  <header class="mdl-card__title mdlext-js-collapsible mdlext-collapsible" aria-expanded="true">
+    <h2 class="mdl-card__title-text">A Collapsible Card</h2>
+  </header>
+  <section class="mdl-card__supporting-text mdlext-collapsible-group">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Mauris sagittis pellentesque lacus eleifend lacinia...
+  </section>
+  <footer class="mdl-card__actions mdl-card--border mdlext-collapsible-group">
+    <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+      Get Started
+    </button>
+  </footer>
+  <div class="mdl-card__menu">
+    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+      <i class="material-icons">share</i>
+    </button>
+  </div>
+</div>
+
+
+<style>
+  .mdlext-collapsible-group .mdlext-js-collapsible,
+  .mdlext-collapsible-group .mdlext-collapsible-group {
+    margin-left: 16px;
+  }
+</style>
+
+<button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-button--raised">Click to toggle</button>
+<div class="mdlext-collapsible-group">
+  <p>A collapsible region</p>
+
+  <button class="mdlext-js-collapsible mdl-button mdl-button--accent mdl-button--raised">Click to toggle nested #1</button>
+  <div class="mdlext-collapsible-group">
+    <p>A nested collapsible region</p>
+
+    <button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-color--deep-orange-100 mdl-button--raised">Click to toggle nested #2</button>
+    <div class="mdlext-collapsible-group">
+      <p>Last region</p>
+    </div>
+  </div>
+</div>
+
+
+<div id="another-card" class="mdl-card demo-card mdl-shadow--2dp mdlext-dark-color-theme">
+  <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast mdlext-js-collapsible mdlext-collapsible">
+    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+      <i class="material-icons">view_headline</i>
+    </button>
+    <h2 class="mdl-card__title-text">Another collapsible card</h2>
+    <div class="mdl-layout-spacer"></div>
+    <i class="material-icons md-36 mdlext-aria-expanded-more-less"></i>
+  </header>
+  <figure class="mdl-card__media mdlext-collapsible-region">
+    <img src="./images/_DSC7535-2.jpg" alt="">
+  </figure>
+  <section style="margin-top:16px" class="mdl-card__supporting-text mdlext-collapsible-region">
+    <table class="info">
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">primary</th>
+        <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+      </tr>
+      <tr>
+        <th class="mdl-typography--caption-color-contrast">accent</th>
+        <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+      </tr>
+    </table>
+  </section>
+
+  <div class="mdl-card__supporting-text mdlext-collapsible-region">
+    Card Supporting Text
+  </div>
+
+  <footer class="mdl-card__actions mdl-card--border">
+    <button id="read-more" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+      Read more
+    </button>
+    <div class="mdl-layout-spacer"></div>
+    <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+    <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+    <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+  </footer>
+</div>
+
+
+
+<script>
+  (function() {
+    'use strict';
+    window.addEventListener('load', function() {
+
+      document.querySelector('#read-more').addEventListener('click', function (e) {
+        var collapsible = document.querySelector('#another-card .mdlext-js-collapsible');
+        collapsible.MaterialExtCollapsible.expand();
+      });
+
+      document.querySelector('#another-card').addEventListener('toggle', function (e) {
+        console.log('Toggle action:', e.detail.action);
+      });
+
+    });
+
+  }());
+
+</script>