diff --git a/node_modules/mdl-ext/src/bordered-fields/_bordered-fields.scss b/node_modules/mdl-ext/src/bordered-fields/_bordered-fields.scss
new file mode 100644
index 0000000..286e44a
--- /dev/null
+++ b/node_modules/mdl-ext/src/bordered-fields/_bordered-fields.scss
@@ -0,0 +1,251 @@
+/**
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * The bordered fields are based on / inspired by this CodePen: http://codepen.io/prajwal078/pen/LVJZXz?editors=010
+ */
+
+// Use of this module requires the user to include variables from material-design-lite
+//@import "../../node_modules/material-design-lite/src/variables";
+//@import "../../node_modules/material-design-lite/src/mixins";
+
+@import "../variables";
+@import "../functions";
+
+
+// "Theme" for this styling
+.mdlext-bordered-fields {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  // Styling for textfield and selectfield.
+  .mdl-textfield,
+  .mdlext-selectfield {
+    padding: 0;
+    margin: $mdlext-bordered-field-vertical-spacing-top 0 $mdlext-bordered-field-vertical-spacing-bottom 0;
+
+    .mdl-textfield__input,
+    .mdlext-selectfield__select {
+      height: $mdlext-bordered-field-height;
+      background-color: $mdlext-bordered-field-background-color;
+      border: $mdlext-bordered-field-border-width solid $mdlext-bordered-field-border-color;
+      border-radius: $mdlext-bordered-field-border-radius;
+      padding: $mdlext-bordered-field-padding-top $mdlext-bordered-field-padding $mdlext-bordered-field-padding-bottom $mdlext-bordered-field-padding;
+      font-size: $mdlext-bordered-field-input-text-font-size;
+      font-weight: $mdlext-bordered-field-font-weight;
+      color: $mdlext-bordered-field-input-text-color;
+
+      &:disabled {
+        color: $mdlext-bordered-field-input-text-disabled-text-color;
+        background-color: $mdlext-bordered-field-disabled-background-color;
+        border-color: $mdlext-bordered-field-disabled-border-color;
+      }
+
+      // MDL can not handle required attribute properly. Planned for MDL-v2
+      //&:required {
+      //  background-color: $mdlext-bordered-field-required-background-color;
+      //  border-color: $mdlext-bordered-field-required-border-color;
+      //}
+
+      &:focus {
+        background-color: $mdlext-bordered-field-focus-background-color;
+        border-color: $mdlext-bordered-field-focus-border-color;
+      }
+
+      // MDL can not handle required. Planned for MDL-v2
+      //&:required:focus {
+      //  background-color: $mdlext-bordered-field-required-focus-background-color;
+      //  border-color: $mdlext-bordered-field-required-focus-border-color;
+      //}
+    }
+    .mdlext-selectfield__select {
+      padding-right: calc(1em + #{$mdlext-bordered-field-padding});  // space for down arrow
+    }
+
+    /*
+    &.is-dirty {
+      .mdl-textfield__input,
+      .mdlext-selectfield__select {
+      }
+    }
+    */
+
+    &.is-invalid {
+      .mdl-textfield__input,
+      .mdlext-selectfield__select {
+        color: $mdlext-bordered-field-input-text-error-color;
+        border-color: $mdlext-bordered-field-error-border-color;
+        background-color: $mdlext-bordered-field-error-background-color;
+
+        &:focus {
+          //&:required:focus {
+          border-color: $mdlext-bordered-field-error-focus-border-color;
+          background-color: $mdlext-bordered-field-error-focus-background-color;
+        }
+      }
+    }
+  }
+
+  .mdlext-selectfield::after {
+    top: auto;
+    bottom: $mdlext-bordered-field-padding-bottom;  // Position of down arrow
+  }
+
+  fieldset[disabled] .mdlext-selectfield::after,
+  .mdlext-selectfield.is-disabled::after {
+    color: $mdlext-bordered-field-input-text-disabled-text-color;
+    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-bordered-field-input-text-disabled-text-color);
+  }
+
+
+  fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {
+    color: $mdlext-bordered-field-input-text-disabled-text-color;
+    background-color: $mdlext-bordered-field-disabled-background-color;
+    border-color: $mdlext-bordered-field-disabled-border-color;
+  }
+
+
+  // Styling for the label / floating label.
+  .mdl-textfield,
+  .mdlext-selectfield {
+
+    &.is-dirty,
+    &.has-placeholder {
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        visibility: hidden;
+      }
+    }
+    .mdl-textfield__label,
+    .mdlext-selectfield__label {
+      color: $mdlext-bordered-field-input-text-label-color;
+      font-size: $mdlext-bordered-field-label-font-size;
+      font-weight: $mdlext-bordered-field-font-weight;
+      padding-left: $mdlext-bordered-field-padding;
+      top: auto;
+      bottom: $mdlext-bordered-field-padding-bottom;
+
+      // Hides the colored underline for the textField/selectfield.
+      &::after {
+        background-color: transparent !important;
+        visibility: hidden !important;
+      }
+    }
+    &.mdl-textfield--floating-label.is-focused.is-focused,
+    &.mdl-textfield--floating-label.is-dirty.is-dirty,
+    &.mdl-textfield--floating-label.has-placeholder,
+    &.mdlext-selectfield--floating-label.is-focused.is-focused,
+    &.mdlext-selectfield--floating-label.is-dirty.is-dirty,
+    &.mdlext-selectfield--floating-label.has-placeholder {
+
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        color: $mdlext-bordered-field-input-text-label-focus-color;
+        font-size: $mdlext-bordered-field-floating-label-font-size;
+        font-weight: $mdlext-bordered-field-floating-label-font-weight;
+        top: auto;
+        bottom: $mdlext-bordered-field-floating-label-focus-bottom;
+        visibility: visible;
+      }
+    }
+    &.mdl-textfield--floating-label.is-disabled.is-disabled,
+    &.mdlext-selectfield--floating-label.is-disabled.is-disabled {
+
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        color: $mdlext-bordered-field-input-text-label-disabled-color;
+      }
+    }
+    &.mdl-textfield--floating-label.is-invalid.is-invalid,
+    &.mdlext-selectfield--floating-label.is-invalid.is-invalid {
+
+      .mdl-textfield__label,
+      .mdlext-selectfield__label {
+        color: $mdlext-bordered-field-input-text-label-error-color;
+      }
+    }
+  }
+
+  fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+  fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {
+    color: $mdlext-bordered-field-input-text-label-disabled-color;
+  }
+
+  // Icon(s) and/or button(s) inside textfield
+  .mdl-textfield,
+  .mdlext-selectfield {
+    &.mdlext-bordered-fields__icon-left,
+    &.mdlext-bordered-fields__icon-right {
+      & > i,
+      & > .mdl-button {
+        position: absolute;
+        bottom: $mdlext-bordered-field-padding-bottom - 2px;
+      }
+      & > i {
+        bottom: $mdlext-bordered-field-padding-bottom + 2px;
+      }
+    }
+    &.mdlext-bordered-fields__icon-left {
+      & > i:first-child,
+      & > .mdl-button:first-child {
+        left: $mdlext-bordered-field-padding/2;
+      }
+      & > i ~ .mdl-textfield__input,
+      & > .mdl-button ~ .mdl-textfield__input,
+      & > i ~ .mdlext-selectfield__select,
+      & > .mdl-button ~ .mdlext-selectfield__select {
+        padding-left: $input-text-button-size;
+      }
+      & > i ~ .mdl-textfield__label,
+      & > .mdl-button ~ .mdl-textfield__label {
+        left: $input-text-button-size - $mdlext-bordered-field-padding;
+      }
+      & > i ~ .mdlext-selectfield__label,
+      & > .mdl-button ~ .mdlext-selectfield__label {
+        left: $input-text-button-size - $mdlext-bordered-field-padding;
+      }
+    }
+    &.mdlext-bordered-fields__icon-right {
+      & > .mdl-textfield__input {
+        padding-right: $input-text-button-size;
+      }
+      & > i:last-child,
+      & > .mdl-button:last-child {
+        left: auto;
+        right: $mdlext-bordered-field-padding/2;
+      }
+    }
+    &.is-disabled i,
+    &.is-disabled .mdl-button {
+      color: $mdlext-bordered-field-disabled-border-color;
+      pointer-events: none;
+    }
+  }
+
+  fieldset[disabled] .mdl-textfield,
+  fieldset[disabled] .mdlext-selectfield {
+    i,
+    .mdl-button {
+      color: $mdlext-bordered-field-disabled-border-color;
+      pointer-events: none;
+    }
+  }
+}
+
diff --git a/node_modules/mdl-ext/src/bordered-fields/readme.md b/node_modules/mdl-ext/src/bordered-fields/readme.md
new file mode 100644
index 0000000..40dcfff
--- /dev/null
+++ b/node_modules/mdl-ext/src/bordered-fields/readme.md
@@ -0,0 +1,98 @@
+# Bordered fields
+![Bordered fields](../../etc/bordered-fields-theme.png)
+
+Demonstrates how you can create your own theme of MDL text fields.
+
+## Introduction
+The Material Design Lite Ext (MDLEXT) bordered fields component is a method for decorating contained
+MDL textfields and MDLEXT selectfields without affecting the original MDL design. You can apply the `mdlext-bordered-fields` class
+to any HTML block element and use that as a container for the bordered fields.
+
+### To include a MDLEXT **bordered fields** component:
+&nbsp;1. Code a block element, as the "outer" container, intended to hold all of the bordered fields.
+```html
+<div>
+</div>
+```
+
+&nbsp;2. Add the `mdlext-bordered-fields` MDLEXT class to the block element using the `class` attribute.
+```html
+<div class="mdlext-bordered-fields">
+</div>
+```
+
+&nbsp;3. Add the MDL and MDLEXT fields you want to decorate.
+```html
+<div class="mdlext-bordered-fields">
+  <div class="mdl-textfield mdl-js-textfield">
+    <input class="mdl-textfield__input" type="text" id="sample1">
+    <label class="mdl-textfield__label" for="sample1">Text ...</label>
+  </div>
+
+  <div class="mdlext-selectfield mdlext-js-selectfield">
+    <select class="mdlext-selectfield__select" id="nordic-countries" name="nordic-countries">
+      <option value=""></option>
+      <option value="option1">Norway</option>
+      <option value="option2">Sweden</option>
+      <option value="option3">Suomi</option>
+      <option value="option4">Denmark</option>
+      <option value="option5">Iceland</option>
+    </select>
+    <label class="mdlext-selectfield__label" for="nordic-countries">Where do you want to go</label>
+  </div>
+  .....
+</div>
+```
+
+&nbsp;4. Optionally embed icons and/or buttons into a bordered field by adding the CSS classes 
+`mdlext-bordered-fields__icon-left` and `mdlext-bordered-fields__icon-right` respectively.
+```html
+  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+    <i class="material-icons">radio</i>
+    <input class="mdl-textfield__input" type="text" id="icon-button1">
+    <label class="mdl-textfield__label">Text...</label>
+    <label class="mdl-button mdl-js-button mdl-button--icon" for="icon-button1">
+      <i class="material-icons">settings_voice</i>
+    </label>
+  </div>
+  
+  <div class="mdlext-selectfield mdlext-js-selectfield mdlext-bordered-fields__icon-left">
+    <i class="material-icons">radio</i>
+    <select class="mdlext-selectfield__select" id="nordic-countries" name="nordic-countries">
+      <option value=""></option>
+      <option value="option1">Norway</option>
+      <option value="option2">Sweden</option>
+      <option value="option3">Suomi</option>
+      <option value="option4">Denmark</option>
+      <option value="option5">Iceland</option>
+    </select>
+    <label class="mdlext-selectfield__label" for="nordic-countries">Where do you want to go</label>
+  </div>
+```
+
+>**Note:** The `mdlext-selectfield` component can only embed an icon at the left hand side.
+
+#### Examples
+See the [example code](./snippets/bordered-fields.html).
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to text fields and select fields. 
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdlext-bordered-fields` | Defines container as an MDL bordered fields component | Required on an "outer" block element|
+| `mdlext-bordered-fields__icon-left` | Add class on `mdl-textfield` or `mdlext-selectfield` container if you want to embedd a left aligned icon or a button into the bordered field |  |
+| `mdlext-bordered-fields__icon-right` | Add class on `mdl-textfield` or `mdlext-selectfield` container if you want to embedd a right aligned icon or a button into the bordered field  |  |
+
+
+### SASS variables.
+
+See: [variables.scss](../_variables.scss)
+
+### Calculations of heights, vertical spacing and positioning of labels and icons
+See: [bordered-fields.scss](./_bordered-fields.scss)
+
+### Credits 
+The Bordered Fields component is based on this [CodePen](http://codepen.io/prajwal078/pen/LVJZXz)
diff --git a/node_modules/mdl-ext/src/bordered-fields/snippets/bordered-fields.html b/node_modules/mdl-ext/src/bordered-fields/snippets/bordered-fields.html
new file mode 100644
index 0000000..5b14918
--- /dev/null
+++ b/node_modules/mdl-ext/src/bordered-fields/snippets/bordered-fields.html
@@ -0,0 +1,376 @@
+<p>Demonstrates how you can create your own theme of MDL text fields without affecting the original MDL fields.</p>
+
+<style>
+  .borderedfield-demo-container {
+  }
+
+  .borderedfield-demo-container .mdl-cell {
+    padding: 0 4px 8px 0;
+  }
+
+  .borderedfield-demo-container .mdl-cell p {
+    margin-bottom: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  /* File input example */
+  .mdl-button--file input {
+    cursor: pointer;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+  }
+</style>
+
+
+<div class = "borderedfield-demo-container mdlext-bordered-fields">
+
+  <div class="mdl-grid mdl-grid--no-spacing">
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text</p>
+      <div class="mdl-textfield mdl-js-textfield">
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text numeric</p>
+      <div class="mdl-textfield mdl-js-textfield">
+        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+        <label class="mdl-textfield__label">Number...</label>
+        <span class="mdl-textfield__error">Input is not a number!</span>
+      </div>
+    </div>
+
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with floating label, required field</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+        <label class="mdl-textfield__label">Programming language</label>
+      </div>
+    </div>
+    <datalist id="languages">
+      <option value="HTML">
+      <option value="CSS">
+      <option value="JavaScript">
+      <option value="Java">
+      <option value="Ruby">
+      <option value="PHP">
+      <option value="Go">
+      <option value="Erlang">
+      <option value="Python">
+      <option value="C">
+      <option value="C#">
+      <option value="C++">
+    </datalist>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Select element with floating label</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Numeric with floating label</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+        <label class="mdl-textfield__label">Number...</label>
+        <span class="mdl-textfield__error">Input is not a number!</span>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Disabled floating label</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+        <label class="mdl-textfield__label" >Number...</label>
+        <span class="mdl-textfield__error">Input is not a number!</span>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with icons left and right, disabled</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text" disabled>
+        <label class="mdl-textfield__label">Text...</label>
+        <i class="material-icons">fingerprint</i>
+      </div>
+    </div>
+
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with button left</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">phone</i>
+        </label>
+
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with button right</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </div>
+
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Select element</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield">
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Select element with floating label</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Disabled Select element</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+        <select class="mdlext-selectfield__select" disabled>
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Select element with icon left</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-bordered-fields__icon-left">
+        <i class="material-icons">radio</i>
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Select element with button left</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">phone</i>
+        </label>
+        <select class="mdlext-selectfield__select">
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Disabled Select element</p>
+      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">phone</i>
+        </label>
+        <select class="mdlext-selectfield__select" disabled>
+          <option value=""></option>
+          <option value="option1">option 1</option>
+          <option value="option2">option 2</option>
+          <option value="option3">option 3</option>
+          <option value="option4">option 4</option>
+          <option value="option5">option 5</option>
+        </select>
+        <label class="mdlext-selectfield__label">Profession</label>
+      </div>
+    </div>
+
+
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with icon left</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with icon right</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+        <i class="material-icons">fingerprint</i>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with icons left and right</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+        <i class="material-icons">fingerprint</i>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with buttons left and right</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">phone</i>
+        </label>
+
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with buttons left and right, disabled</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">phone</i>
+        </label>
+
+        <input class="mdl-textfield__input" type="text" disabled>
+        <label class="mdl-textfield__label">Text...</label>
+
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>Text with icon and button</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+        <i class="material-icons">radio</i>
+        <input class="mdl-textfield__input" type="text">
+        <label class="mdl-textfield__label">Text...</label>
+        <label class="mdl-button mdl-js-button mdl-button--icon">
+          <i class="material-icons">settings_voice</i>
+        </label>
+      </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--4-col">
+      <p>File upload</p>
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+        <input class="mdl-textfield__input" type="text" id="uploadfile2" readonly>
+        <label class="mdl-textfield__label">File (work in progress)</label>
+
+        <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile2">
+          <i class="material-icons">attach_file</i>
+          <input type="file" id="uploadBtn2">
+        </label>
+      </div>
+      <!--
+        // Need a script to work properly - something like this
+      -->
+      <script>
+        (function() {
+          'use strict';
+          document.querySelector('#uploadBtn2').addEventListener('change', function() {
+            var n = document.querySelector("#uploadfile2");
+            n.value = this.files[0].name;
+            n.parentNode.classList.add('is-dirty');
+          });
+        }());
+      </script>
+    </div>
+
+  </div>
+
+  <fieldset disabled>
+    <legend>Disabled fieldset</legend>
+    <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+      <select class="mdlext-selectfield__select">
+        <option value=""></option>
+        <option value="option1">option 1</option>
+        <option value="option2">option 2</option>
+        <option value="option3">option 3</option>
+        <option value="option4">option 4</option>
+        <option value="option5">option 5</option>
+        <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+      </select>
+      <label class="mdlext-selectfield__label">Profession</label>
+    </div>
+
+    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+      <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+      <label class="mdl-textfield__label">Number...</label>
+      <span class="mdl-textfield__error">Input is not a number!</span>
+    </div>
+
+    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+      <i class="material-icons">radio</i>
+      <input class="mdl-textfield__input" type="text">
+      <label class="mdl-textfield__label">Text...</label>
+      <label class="mdl-button mdl-js-button mdl-button--icon">
+        <i class="material-icons">settings_voice</i>
+      </label>
+    </div>
+  </fieldset>
+
+</div>
+
+<h5>Credits</h5>
+<p>The Bordered Fields Theme component is based on this <a href="http://codepen.io/prajwal078/pen/LVJZXz" target="_blank">CodePen</a></p>