From 32c7e58e23107f88e414fce838039f9a120239e9 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 7 Jun 2017 09:22:27 +0200
Subject: [PATCH] Added form normalisation and button style. Removed IE 7
 fixes.

---
 sass/_zen.scss                                |   14 +
 sass/base/_normalize.scss                     |    1 +
 sass/base/embedded/_embedded.scss             |    5 -
 sass/base/forms/_forms.scss                   |  237 +++
 sass/base/forms/forms-button.twig             |   24 +
 sass/base/forms/forms-fieldset.twig           |   22 +
 sass/base/forms/forms-input-checkbox.twig     |    7 +
 sass/base/forms/forms-input-radio.twig        |   11 +
 sass/base/forms/forms-input.twig              |   97 ++
 sass/base/forms/forms-label.twig              |    8 +
 sass/base/forms/forms-select.twig             |   38 +
 sass/base/forms/forms-textarea.twig           |    8 +
 sass/base/grouping/_grouping.scss             |    9 -
 sass/components/button/_button.scss           |  108 ++
 sass/components/button/button.twig            |   28 +
 sass/styles.scss                              |    1 +
 static/css/styles.css                         |    2 +-
 styleguide/index.html                         |   11 +-
 styleguide/item-base-embedded-img.html        |   11 +-
 styleguide/item-base-embedded-svg.html        |   13 +-
 styleguide/item-base-embedded.html            |   11 +-
 styleguide/item-base-grouping-blockquote.html |   11 +-
 styleguide/item-base-grouping-figure.html     |   13 +-
 styleguide/item-base-grouping-hr.html         |   13 +-
 styleguide/item-base-grouping-lists-dl.html   |   11 +-
 styleguide/item-base-grouping-lists-ol.html   |   11 +-
 styleguide/item-base-grouping-lists-ul.html   |   11 +-
 styleguide/item-base-grouping-lists.html      |   11 +-
 styleguide/item-base-grouping-p.html          |   13 +-
 styleguide/item-base-grouping-pre.html        |   13 +-
 styleguide/item-base-grouping.html            |   11 +-
 styleguide/item-base-headings.html            |   11 +-
 styleguide/item-base-link.html                |   11 +-
 styleguide/item-base-table.html               |   11 +-
 styleguide/item-base-text-abbr.html           |   11 +-
 styleguide/item-base-text-b.html              |   11 +-
 styleguide/item-base-text-cite.html           |   11 +-
 styleguide/item-base-text-code.html           |   11 +-
 styleguide/item-base-text-del.html            |   11 +-
 styleguide/item-base-text-dfn.html            |   11 +-
 styleguide/item-base-text-i.html              |   11 +-
 styleguide/item-base-text-ins.html            |   11 +-
 styleguide/item-base-text-mark.html           |   11 +-
 styleguide/item-base-text-q.html              |   11 +-
 styleguide/item-base-text-s.html              |   11 +-
 styleguide/item-base-text-small.html          |   11 +-
 styleguide/item-base-text-sub.html            |   11 +-
 styleguide/item-base-text-u.html              |   11 +-
 styleguide/item-base-text.html                |   11 +-
 styleguide/item-base.html                     |   11 +-
 styleguide/item-components-box.html           |   13 +-
 styleguide/item-components-clearfix.html      |   13 +-
 styleguide/item-components-divider.html       |   13 +-
 styleguide/item-components-header.html        |   13 +-
 styleguide/item-components-hidden.html        |   13 +-
 .../item-components-highlight-mark.html       |   13 +-
 styleguide/item-components-inline-links.html  |   13 +-
 .../item-components-inline-sibling.html       |   13 +-
 styleguide/item-components-print-none.html    |   13 +-
 .../item-components-responsive-video.html     |   13 +-
 .../item-components-visually-hidden.html      |   13 +-
 styleguide/item-components-watermark.html     |   13 +-
 styleguide/item-components-wireframe.html     |   13 +-
 styleguide/item-components.html               |   39 +-
 styleguide/item-forms-base-fieldset.html      |  220 +++
 .../item-forms-base-input-checkbox.html       |  192 +++
 styleguide/item-forms-base-input-radio.html   |  200 +++
 styleguide/item-forms-base-input.html         |  371 ++++
 styleguide/item-forms-base-label.html         |  193 +++
 styleguide/item-forms-base-select.html        |  254 +++
 styleguide/item-forms-base-textarea.html      |  191 +++
 styleguide/item-forms-base.html               |  130 ++
 styleguide/item-forms-button.html             |  313 ++++
 styleguide/item-forms.html                    |  177 ++
 styleguide/item-layouts-layout-3col.html      |   13 +-
 styleguide/item-layouts-layout-center.html    |   13 +-
 styleguide/item-layouts-layout-swap.html      |   13 +-
 styleguide/item-layouts.html                  |   19 +-
 styleguide/item-navigation-breadcrumb.html    |   13 +-
 styleguide/item-navigation-more-link.html     |   13 +-
 styleguide/item-navigation-nav-menu.html      |   13 +-
 styleguide/item-navigation-navbar.html        |   13 +-
 styleguide/item-navigation-pager.html         |   13 +-
 styleguide/item-navigation-skip-link.html     |   13 +-
 styleguide/item-navigation.html               |   27 +-
 styleguide/item-sass-colors.html              |   11 +-
 styleguide/item-sass-functions.html           |   11 +-
 styleguide/item-sass-init.html                |   11 +-
 styleguide/item-sass-mixins-clearfix.html     |   11 +-
 styleguide/item-sass-mixins-image-url.html    |   11 +-
 styleguide/item-sass-mixins-rtl.html          |   11 +-
 ...ass-mixins-visually-hidden--focusable.html |   11 +-
 ...item-sass-mixins-visually-hidden--off.html |   11 +-
 .../item-sass-mixins-visually-hidden.html     |   11 +-
 styleguide/item-sass-mixins.html              |   11 +-
 styleguide/item-sass-modules.html             |   11 +-
 .../item-sass-variables-breakpoints.html      |   11 +-
 styleguide/item-sass-variables-misc.html      |   11 +-
 .../item-sass-variables-support-for.html      |   11 +-
 styleguide/item-sass-variables-typey.html     |   11 +-
 styleguide/item-sass-variables-zen-grids.html |   11 +-
 styleguide/item-sass-variables.html           |   11 +-
 styleguide/item-sass.html                     |   11 +-
 styleguide/section-base.html                  |   21 +-
 styleguide/section-components.html            |   65 +-
 styleguide/section-forms.html                 | 1492 +++++++++++++++++
 styleguide/section-layouts.html               |   25 +-
 styleguide/section-navigation.html            |   39 +-
 styleguide/section-sass.html                  |   11 +-
 109 files changed, 5092 insertions(+), 364 deletions(-)
 create mode 100644 sass/base/forms/_forms.scss
 create mode 100644 sass/base/forms/forms-button.twig
 create mode 100644 sass/base/forms/forms-fieldset.twig
 create mode 100644 sass/base/forms/forms-input-checkbox.twig
 create mode 100644 sass/base/forms/forms-input-radio.twig
 create mode 100644 sass/base/forms/forms-input.twig
 create mode 100644 sass/base/forms/forms-label.twig
 create mode 100644 sass/base/forms/forms-select.twig
 create mode 100644 sass/base/forms/forms-textarea.twig
 create mode 100644 sass/components/button/_button.scss
 create mode 100644 sass/components/button/button.twig
 create mode 100644 styleguide/item-forms-base-fieldset.html
 create mode 100644 styleguide/item-forms-base-input-checkbox.html
 create mode 100644 styleguide/item-forms-base-input-radio.html
 create mode 100644 styleguide/item-forms-base-input.html
 create mode 100644 styleguide/item-forms-base-label.html
 create mode 100644 styleguide/item-forms-base-select.html
 create mode 100644 styleguide/item-forms-base-textarea.html
 create mode 100644 styleguide/item-forms-base.html
 create mode 100644 styleguide/item-forms-button.html
 create mode 100644 styleguide/item-forms.html
 create mode 100644 styleguide/section-forms.html

diff --git a/sass/_zen.scss b/sass/_zen.scss
index e84b77a..b5f24c3 100644
--- a/sass/_zen.scss
+++ b/sass/_zen.scss
@@ -269,6 +269,20 @@ body {
 }
 
 
+/* Form */
+
+.contact-form {
+  input,
+  textarea {
+    @include margin-bottom(.75);
+    width: 95%;
+  }
+
+  button {
+    display: block;
+  }
+}
+
 /* Print. */
 
 aside,
diff --git a/sass/base/_normalize.scss b/sass/base/_normalize.scss
index f078705..d934fb1 100644
--- a/sass/base/_normalize.scss
+++ b/sass/base/_normalize.scss
@@ -17,6 +17,7 @@
 @import 'text/text';
 @import 'grouping/grouping';
 @import 'embedded/embedded';
+@import 'forms/forms';
 @import 'tables/tables';
 
 // Note: we allow the .button component (loaded by forms) to override :link, by
diff --git a/sass/base/embedded/_embedded.scss b/sass/base/embedded/_embedded.scss
index 1770466..23359d0 100644
--- a/sass/base/embedded/_embedded.scss
+++ b/sass/base/embedded/_embedded.scss
@@ -15,11 +15,6 @@
 img {
   // Remove the border on images inside links in IE <11.
   border-style: none;
-  @if support-for(ie, 7) {
-    // Improve image quality when scaled in IE 7.
-    // sass-lint:disable no-vendor-prefixes
-    -ms-interpolation-mode: bicubic;
-  }
 }
 
 img,
diff --git a/sass/base/forms/_forms.scss b/sass/base/forms/_forms.scss
new file mode 100644
index 0000000..f594a2e
--- /dev/null
+++ b/sass/base/forms/_forms.scss
@@ -0,0 +1,237 @@
+// sass-lint:disable no-vendor-prefixes, no-css-comments
+
+// Form defaults
+//
+// These are the default base styles applied to HTML form elements.
+//
+// Component classes can override these styles, but if no class applies a style
+// to an HTML form element, these styles will be the ones displayed.
+//
+// Weight: -1
+//
+// Style guide: forms.base
+
+//
+// The following rules are from normalize.css and help to fix inconsistencies
+// across various browsers. You should probably leave these rules as is and jump
+// to the "Buttons" rule on line 92 before you start editing this file.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  // Keep form elements constrained in their containers.
+  box-sizing: border-box;
+  max-width: 100%;
+  // Change font properties to `inherit` in all browsers (opinionated).
+  font: inherit;
+  // Remove the margin in Firefox and Safari.
+  margin: 0;
+}
+
+// Show the overflow in IE.
+button {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+button,
+select {
+  text-transform: none;
+}
+
+// Show the overflow in Edge.
+input {
+  overflow: visible;
+  @if support-for(firefox, 29) {
+    // Firefox sets `line-height` using `!important` in the UA stylesheet.
+    line-height: normal;
+  }
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+
+  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+// Correct the text style of placeholders in Chrome, Edge, and Safari.
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+::-webkit-file-upload-button {
+  // Correct the inability to style clickable types in iOS and Safari.
+  -webkit-appearance: button;
+  // Change font properties to `inherit` in Safari.
+  font: inherit;
+}
+
+// The %text-form-element can be used to style `<input>` text types and
+// `<textarea>` elements at the same time.
+%text-form-element {
+  // Add your styles.
+}
+
+// Inputs
+//
+// The `<input>` element is mostly used for text-based inputs that include the
+// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
+// `time`, `number`, `range`, `color`, and `file`.
+//
+// Markup: forms-input.twig
+//
+// Style guide: forms.base.input
+
+[type='text'],
+[type='search'],
+[type='tel'],
+[type='url'],
+[type='email'],
+[type='password'],
+[type='date'],
+[type='time'],
+[type='number'] {
+  @extend %text-form-element !optional;
+}
+
+[type='range'] {
+  // Add your styles.
+}
+
+[type='color'] {
+  // Add your styles.
+}
+
+[type='file'] {
+  // Add your styles.
+}
+
+// Checkboxes
+//
+// If an `<input>` element has the `type='checkbox'` attribute set, the form
+// field is displayed as a checkbox.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-checkbox.twig
+//
+// Style guide: forms.base.input-checkbox
+
+// Radio buttons
+//
+// If an `<input>` element has the `type='radio'` attribute set, the form field
+// is displayed as a radio button.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-radio.twig
+//
+// Style guide: forms.base.input-radio
+
+[type='checkbox'],
+[type='radio'] {
+  // Add the correct box sizing in IE <11.
+  box-sizing: border-box;
+  // Remove the padding in IE <11.
+  padding: 0;
+}
+
+// Fieldsets
+//
+// The `<fieldset>` element groups a set of form fields, optionally under a
+// common name given by the `<legend>` element.
+//
+// Markup: forms-fieldset.twig
+//
+// Style guide: forms.base.fieldset
+
+fieldset {
+  // Change the border, margin, and padding in all browsers (opinionated).
+  @include padding(.35 .625 .65);
+  border: 1px solid color(border);
+  margin: 0 2px;
+}
+
+legend {
+  // Correct the text wrapping in Edge and IE.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Correct the color inheritance from `fieldset` elements in IE.
+  color: inherit;
+  // Align legend text with a fieldset's text while removing left padding so
+  // people aren't caught out if they zero out fieldset padding.
+  margin-left: -5px;
+  padding: 0 5px;
+}
+
+// Labels
+//
+// The `<label>` element represents a caption of a form field. The label can be
+// associated with a specific form control by using the `for` attribute or by
+// putting the form control inside the label element itself.
+//
+// Markup: forms-label.twig
+//
+// Style guide: forms.base.label
+
+label {
+  // Drupal-style form labels.
+  display: block;
+  font-weight: bold;
+}
+
+// Select list
+//
+// The `<select>` element represents a form field for selecting amongst a set of
+// options.
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `<select>`, unless a `border` property is set.
+//
+// Markup: forms-select.twig
+//
+// Style guide: forms.base.select
+
+select {
+  // Add your styles.
+}
+
+optgroup {
+  // Restore the font weight unset by a previous rule.
+  font-weight: bold;
+}
+
+// Text areas
+//
+// The `<textarea>` element represents a multi-line plain text form field.
+//
+// Markup: forms-textarea.twig
+//
+// Style guide: forms.base.textarea
+
+textarea {
+  @extend %text-form-element !optional;
+  // Remove the default vertical scrollbar in IE.
+  overflow: auto;
+}
diff --git a/sass/base/forms/forms-button.twig b/sass/base/forms/forms-button.twig
new file mode 100644
index 0000000..efc1612
--- /dev/null
+++ b/sass/base/forms/forms-button.twig
@@ -0,0 +1,24 @@
+<p>
+  <button type="button" class="{{modifier_class}}">Standard button</button>
+  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
+</p>
+<p>
+  <button type="submit" class="{{modifier_class}}">Submit button</button>
+  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button type="reset" class="{{modifier_class}}">Reset button</button>
+  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input type="button" class="{{modifier_class}}" value="Input button">
+  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
+</p>
+<p>
+  <input type="submit" class="{{modifier_class}}" value="Input submit button">
+  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input type="reset" class="{{modifier_class}}" value="Input reset button">
+  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
+</p>
diff --git a/sass/base/forms/forms-fieldset.twig b/sass/base/forms/forms-fieldset.twig
new file mode 100644
index 0000000..5b75985
--- /dev/null
+++ b/sass/base/forms/forms-fieldset.twig
@@ -0,0 +1,22 @@
+<fieldset class="{{modifier_class}}">
+  <legend>A fieldset</legend>
+  <label for="fieldsetText">Text input</label>
+  <input type="text" id="fieldsetText" placeholder="Text input">
+</fieldset>
+
+<fieldset class="{{modifier_class}}" disabled>
+  <legend>A disabled fieldset</legend>
+  <div>
+    <label for="fieldsetText2">Disabled text input</label>
+    <input type="text" id="fieldsetText2" placeholder="Disabled input">
+  </div>
+  <div>
+    <label for="fieldsetSelect">Disabled select menu</label>
+    <select id="fieldsetSelect">
+      <option>Disabled select</option>
+    </select>
+  </div>
+  <div>
+    <label><input type="checkbox"> Can't check this</label>
+  </div>
+</fieldset>
diff --git a/sass/base/forms/forms-input-checkbox.twig b/sass/base/forms/forms-input-checkbox.twig
new file mode 100644
index 0000000..43c6861
--- /dev/null
+++ b/sass/base/forms/forms-input-checkbox.twig
@@ -0,0 +1,7 @@
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
+</div>
+
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
+</div>
diff --git a/sass/base/forms/forms-input-radio.twig b/sass/base/forms/forms-input-radio.twig
new file mode 100644
index 0000000..deec81f
--- /dev/null
+++ b/sass/base/forms/forms-input-radio.twig
@@ -0,0 +1,11 @@
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
+</div>
diff --git a/sass/base/forms/forms-input.twig b/sass/base/forms/forms-input.twig
new file mode 100644
index 0000000..85f1a71
--- /dev/null
+++ b/sass/base/forms/forms-input.twig
@@ -0,0 +1,97 @@
+<div>
+  <label for="inputText">Text</label>
+  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputSearch">Search</label>
+  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
+</div>
+<div>
+  <label for="inputTel">Telephone</label>
+  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputURL">URL</label>
+  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
+</div>
+<div>
+  <label for="inputEmail">Email address</label>
+  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
+</div>
+<div>
+  <label for="inputPassword">Password</label>
+  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
+</div>
+<div>
+  <label for="inputDate">Date</label>
+  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
+</div>
+<div>
+  <label for="inputTime">Time</label>
+  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
+</div>
+<div>
+  <label for="inputNumber">Number</label>
+  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
+</div>
+<div>
+  <label for="inputRange">Range</label>
+  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
+</div>
+<div>
+  <label for="inputColor">Color</label>
+  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
+</div>
+<div>
+  <label for="inputFile">File input</label>
+  <input type="file" class="{{modifier_class}}" id="inputFile">
+</div>
+
+<div>
+  <label for="inputText">Disabled text</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
+</div>
+<div>
+  <label for="inputSearch">Disabled search</label>
+  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
+</div>
+<div>
+  <label for="inputTel">Disabled telephone</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
+</div>
+<div>
+  <label for="inputURL">Disabled URL</label>
+  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
+</div>
+<div>
+  <label for="inputEmail">Disabled email address</label>
+  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
+</div>
+<div>
+  <label for="inputPassword">Disabled password</label>
+  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
+</div>
+<div>
+  <label for="inputDate">Disabled date</label>
+  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
+</div>
+<div>
+  <label for="inputTime">Disabled time</label>
+  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
+</div>
+<div>
+  <label for="inputNumber">Disabled number</label>
+  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
+</div>
+<div>
+  <label for="inputRange">Disabled range</label>
+  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
+</div>
+<div>
+  <label for="inputColor">Disabled color</label>
+  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
+</div>
+<div>
+  <label for="inputFile">Disabled file input</label>
+  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
+</div>
diff --git a/sass/base/forms/forms-label.twig b/sass/base/forms/forms-label.twig
new file mode 100644
index 0000000..f258d67
--- /dev/null
+++ b/sass/base/forms/forms-label.twig
@@ -0,0 +1,8 @@
+<div>
+  <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
+  <input type="text" id="lableInputText" placeholder="Enter some text">
+</div>
+
+<div>
+  <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
+</div>
diff --git a/sass/base/forms/forms-select.twig b/sass/base/forms/forms-select.twig
new file mode 100644
index 0000000..99a4231
--- /dev/null
+++ b/sass/base/forms/forms-select.twig
@@ -0,0 +1,38 @@
+<div>
+  <label for="selectDropdown">A standard drop-down</label>
+  <select class="{{modifier_class}}" id="selectDropdown">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectMultiItem">A multi-item select field</label>
+  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectDisabled">A disabled drop-down</label>
+  <select class="{{modifier_class}}" id="selectDisabled" disabled>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
diff --git a/sass/base/forms/forms-textarea.twig b/sass/base/forms/forms-textarea.twig
new file mode 100644
index 0000000..fbef154
--- /dev/null
+++ b/sass/base/forms/forms-textarea.twig
@@ -0,0 +1,8 @@
+<div>
+  <label for="exampleTextarea">Text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
+</div>
+<div>
+  <label for="exampleTextarea">Disabled text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
+</div>
diff --git a/sass/base/grouping/_grouping.scss b/sass/base/grouping/_grouping.scss
index 1a9628b..5b82f02 100644
--- a/sass/base/grouping/_grouping.scss
+++ b/sass/base/grouping/_grouping.scss
@@ -103,15 +103,6 @@ ul {
   }
 }
 
-@if support-for(ie, 7) {
-  // Correct list images handled incorrectly in IE 7.
-  nav ul,
-  nav ol {
-    list-style: none;
-    list-style-image: none;
-  }
-}
-
 // Figures
 //
 // The `<figure>` element can be used to annotate illustrations, diagrams,
diff --git a/sass/components/button/_button.scss b/sass/components/button/_button.scss
new file mode 100644
index 0000000..2d2ada2
--- /dev/null
+++ b/sass/components/button/_button.scss
@@ -0,0 +1,108 @@
+// Button
+//
+// In addition to the default styling of `<button>` and
+// `<input type="submit|image|reset|button">` elements, the `.button` class and
+// its variants can apply buttons styles to various elements (like an `<a>`
+// link).
+//
+// :hover  - Hover styling.
+// :active - Depressed button styling.
+//
+// Markup: button.twig
+//
+// Style guide: forms.button
+
+.button,
+%button,
+button,
+// 1
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -moz-appearance: button;
+  -webkit-appearance: button; // 2
+}
+
+.button,
+%button,
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  @extend %button--disabled;
+  @include typeface(headings);
+  @include margin-right(.75);
+  @include margin-bottom(.75);
+  // Some styles don't apply to <a> links since they are inline elements by default.
+  display: inline-block;
+  padding: 2px 10px;
+  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
+  // the UA stylesheet. And prevent its "line-height: normal" rule below from
+  // breaking the "appearance: button" styling on the input elements.
+  line-height: inherit;
+  text-decoration: none;
+  // Improve usability and consistency of cursor style between image-type `input` and others.
+  cursor: pointer;
+  color: color(button);
+  text-align: center;
+  background-image: linear-gradient(#f6f6f6, #e2e2e2);
+  border: 1px solid #e4e4e4;
+  border-left-color: #d2d2d2;
+  border-right-color: #d2d2d2;
+  border-bottom-color: #b4b4b4;
+  border-radius: 2px;
+
+
+  // Remove the inner border and padding in Firefox.
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  // Restore the focus styles unset by the previous rule.
+  &:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    text-decoration: none;
+    color: color(button);
+  }
+
+  &:active {
+    border-color: #555;
+    text-shadow: color(button) 0 -1px 0;
+    background: color(grey-dark);
+    color: color(text-bg);
+  }
+}
+
+// Add button variations here.
+.button,
+%button {
+  &--variant-name {
+    // Add styles here.
+  }
+}
+
+// The disabled variation should always go last, so that it overrides any
+// other variations.
+%button--disabled[disabled] {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: color(button-disabled);
+  background-color: color(grey-extra-light);
+  border-color: color(grey-extra-light);
+  background-image: none;
+  text-shadow: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: color(button-disabled);
+  }
+}
diff --git a/sass/components/button/button.twig b/sass/components/button/button.twig
new file mode 100644
index 0000000..4a32e9f
--- /dev/null
+++ b/sass/components/button/button.twig
@@ -0,0 +1,28 @@
+<p>
+  <button class="button {{modifier_class}}" type="button">Standard button</button>
+  <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button {{modifier_class}}" type="submit">Submit button</button>
+  <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button {{modifier_class}}" type="reset">Reset button</button>
+  <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="button" value="Input button">
+  <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="submit" value="Input submit button">
+  <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="reset" value="Input reset button">
+  <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button {{modifier_class}}" href="#">Link button</a>
+  <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
+</p>
diff --git a/sass/styles.scss b/sass/styles.scss
index 3bfeff6..fc8e46a 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -48,6 +48,7 @@
 // Style guide: components
 
 @import 'components/box/box';
+@import 'components/button/button';
 @import 'components/clearfix/clearfix';
 @import 'components/divider/divider';
 @import 'components/header/header';
diff --git a/static/css/styles.css b/static/css/styles.css
index a506d9f..045144e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1 +1 @@
-/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Charter,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#c00}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}@media print{:link,:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")";font-weight:400;font-size:22px;text-decoration:none}a[href^='#']::after,a[href^='javascript:']::after{content:''}}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}@media print{abbr[title]::after{content:" (" attr(title) ")"}}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout-3col{margin-left:-10px;margin-right:-10px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__col-1,.layout-3col__col-2,.layout-3col__col-3,.layout-3col__col-4,.layout-3col__col-x,.layout-3col__first-left-sidebar,.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar,.layout-3col__second-left-sidebar{clear:both;padding-left:10px;padding-right:10px;float:left;width:100%;margin-left:0;margin-right:-100%}@media (min-width:777px){.layout-3col{margin-left:-20px;margin-right:-20px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar{float:left;width:100%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-1,.layout-3col__col-3,.layout-3col__col-x:nth-child(2n+1),.layout-3col__first-left-sidebar{float:left;width:50%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-2,.layout-3col__col-4,.layout-3col__col-x:nth-child(2n),.layout-3col__second-left-sidebar{clear:none;float:left;width:50%;margin-left:50%;margin-right:-100%;padding-left:20px;padding-right:20px}}@media (min-width:999px){.layout-3col__full{float:left;width:100%;margin-left:0;margin-right:-100%}.layout-3col__left-content{float:left;width:66.66667%;margin-left:0;margin-right:-100%}.layout-3col__right-content{float:left;width:66.66667%;margin-left:33.33333%;margin-right:-100%}.layout-3col__first-left-sidebar,.layout-3col__left-sidebar,.layout-3col__second-left-sidebar{clear:right;float:right;width:33.33333%;margin-right:66.66667%;margin-left:-100%}.layout-3col__right-sidebar{clear:right;float:right;width:33.33333%;margin-right:0;margin-left:-100%}.layout-3col__col-1,.layout-3col__col-x:nth-child(3n+1){clear:both;float:left;width:33.33333%;margin-left:0;margin-right:-100%}.layout-3col__col-2,.layout-3col__col-x:nth-child(3n+2){clear:none;float:left;width:33.33333%;margin-left:33.33333%;margin-right:-100%}.layout-3col__col-3,.layout-3col__col-x:nth-child(3n){clear:none;float:left;width:33.33333%;margin-left:66.66667%;margin-right:-100%}.layout-3col__col-4{display:none}}.layout-3col__grid-item-container{padding-left:0;padding-right:0}.layout-3col__grid-item-container:before{content:"";display:table}.layout-3col__grid-item-container:after{content:"";display:table;clear:both}.layout-center{padding-left:10px;padding-right:10px;margin:0 auto;max-width:1180px}.no-sidebars .layout-center{max-width:780px}@media (min-width:777px){.layout-center{padding-left:20px;padding-right:20px}}.layout-center--shared-grid,.layout-center.layout-3col{padding-left:0;padding-right:0}.layout-swap{position:relative}@media (min-width:666px){.layout-swap{padding-top:62px}}@media (min-width:666px){.layout-swap__top{position:absolute;top:0;height:62px;width:100%}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box--is-focus,.box.is-focus,.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.clearfix::before,.header::before{content:'';display:table}.clearfix::after,.header::after{content:'';display:table;clear:both}.header__logo{float:left;margin:0 10px 0 0;padding:0}.header__logo-image{vertical-align:bottom}.header__name-and-slogan{float:left}.header__site-name{margin:0}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}.header__site-slogan{margin:0}.header__secondary-menu{float:right}.header__region{clear:both}.hidden,html.js .element-hidden,html.js .js-hidden,html.js .js-hide{display:none}.highlight-mark,.new,.update{color:#c00;background-color:transparent}.inline-links,.inline.links{padding:0}.inline-links__item,.inline.links li{display:inline;list-style-type:none;padding:0 1em 0 0}.field-label-inline .field-label,.inline-sibling,span.field-label{display:inline;margin-right:10px}.field-label-inline .field-label *,.inline-sibling *,.inline-sibling__child,span.field-label *{display:inline}.field-label-inline .field-label+*,.field-label-inline .field-label+*>:first-child,.field-label-inline .field-label+*>:first-child>:first-child,.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent,span.field-label+*,span.field-label+*>:first-child,span.field-label+*>:first-child>:first-child{display:inline}.field-label-inline .field-items,.field-label-inline .field-label{float:none}@media print{.action-links,.book-navigation,.feed-icons,.forum-topic-navigation,.links,.print-none,.toolbar,aside,footer,nav{display:none}}.media-vimeo-preview-wrapper,.media-youtube-video,.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.media-vimeo-preview-wrapper iframe,.media-youtube-video iframe,.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.element-focusable,.element-invisible,.main-navigation .block-menu .block__title,.main-navigation .block-menu-block .block__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.element-focusable:active,.element-focusable:focus,.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}@media print{.breadcrumb{display:none}}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-help-link,.more-link{text-align:right}.more-help-link a,.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(../sass/navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.menu__item,.nav-menu__item{list-style-image:url(../sass/navigation/nav-menu/leaf.svg);list-style-type:square}.is-expanded.menu__item,.menu__item.is-expanded,.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(../sass/navigation/nav-menu/expanded.svg);list-style-type:circle}.is-collapsed.menu__item,.menu__item.is-collapsed,.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(../sass/navigation/nav-menu/collapsed.svg);list-style-type:disc}.menu a.active,.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.main-navigation .links,.main-navigation .menu,.navbar{margin:0;padding:0;text-align:left}.main-navigation .links li,.main-navigation .menu li,.navbar li,.navbar__item{float:left;padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}@media print{.pager{display:none}}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}@media print{.skip-link__wrapper{display:none}}article>.content ul,aside ul{display:table;list-style:none;padding:0}article>.content ul>li,aside ul>li{display:table-row}article>.content ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:'\2022'}@media (min-width:1111px){article>.content ul>li::before,aside ul>li::before{font-size:.88889rem}}article>.content ol,aside ol{display:table;list-style:none;padding:0}article>.content ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article>.content ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article>.content ol>li::before,aside ol>li::before{font-size:.88889rem}}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em;cursor:pointer;margin:5px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);border-radius:4px;background-color:#333}.slicknav_menu{box-sizing:border-box;background-color:#333;padding:2px}.slicknav_menu::after,.slicknav_menu::before{content:' ';display:table}.slicknav_menu::after{clear:both}.slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_no-text{margin:0}.slicknav_icon-bar{display:block;width:1.125em;height:3px;border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.25);background-color:#fff}.slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_nav{background-color:#fff;color:#000;margin:0;padding:0;list-style:none;overflow:hidden;clear:both}.slicknav_nav ul{display:block;list-style:none;overflow:hidden;padding:0;margin:0 0 0 20px}.slicknav_nav li{display:block}.slicknav_nav a{display:block;padding:5px 10px;margin:2px 5px;text-decoration:none;color:#000}.slicknav_nav a:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_row{display:block;padding:5px 10px;margin:2px 5px}.slicknav_row:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_arrow{margin:0 0 0 .4em}.slicknav_txtnode{margin-left:15px}.slicknav_item{cursor:pointer}.slicknav_item a{display:inline;padding:0;margin:0}.slicknav_parent-link a{display:inline;padding:0;margin:0}.slicknav_brand{float:left;color:#fff;line-height:30px;padding:7px 12px;height:44px}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer,article>header{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer,article>header{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}article>header{color:#999}article>header p{margin:.28182rem 0}@media (min-width:888px){article .submitted,article .tags{display:inline-block;padding-right:1rem}}article .tags ul{margin:0;padding:0}article .tags li,article .tags ul{display:inline}article .tags li{list-style-type:none}article .tags a{padding-right:.28182rem}article code{font-size:.81818rem;line-height:1.40909rem;word-wrap:break-word}article pre{color:#333;border-radius:3px;padding:5px;border:1px solid #ccc;background-color:#fff;overflow:auto;max-height:250px;max-width:550px}article pre>code{display:inline-block;white-space:pre}.title-submitted{margin-bottom:0}@media (min-width:666px){figure{display:table}figure img{display:block}figure.left{padding:0 .70455rem .70455rem 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:0 0 .70455rem .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption h4,figcaption p{margin:0}body{background-color:#eee}.layout-center{background-color:#fff}.header{padding-top:10px}@media (min-width:777px){.header{padding-top:20px}}@media (min-width:666px){.header__logo{float:left}}@media (min-width:666px){.header__site-name{float:left}}@media (min-width:666px){.header__region{float:right;clear:none}}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#333;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#666}.main-menu a.active,.main-menu a:active{background-color:#333;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #333}.footer p{margin:0}.search-form{padding-top:.70455rem}.search-text{font-size:1.09091rem;line-height:1.40909rem}@media print{.layout-center,body{background-color:#fff}.layout-swap{padding-top:0}[role=main]{width:100%}.layout-swap__top{border-bottom:0}:link,:visited{text-decoration:underline}a[href]::after{content:''}}
\ No newline at end of file
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Charter,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#c00}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}@media print{:link,:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")";font-weight:400;font-size:22px;text-decoration:none}a[href^='#']::after,a[href^='javascript:']::after{content:''}}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}@media print{abbr[title]::after{content:" (" attr(title) ")"}}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{box-sizing:border-box;max-width:100%;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}input{overflow:visible}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}fieldset{padding:.49318rem .88068rem .91591rem;border:1px solid #ccc;margin:0 2px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;color:inherit;margin-left:-5px;padding:0 5px}label{display:block;font-weight:700}optgroup{font-weight:700}textarea{overflow:auto}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout-3col{margin-left:-10px;margin-right:-10px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__col-1,.layout-3col__col-2,.layout-3col__col-3,.layout-3col__col-4,.layout-3col__col-x,.layout-3col__first-left-sidebar,.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar,.layout-3col__second-left-sidebar{clear:both;padding-left:10px;padding-right:10px;float:left;width:100%;margin-left:0;margin-right:-100%}@media (min-width:777px){.layout-3col{margin-left:-20px;margin-right:-20px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar{float:left;width:100%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-1,.layout-3col__col-3,.layout-3col__col-x:nth-child(2n+1),.layout-3col__first-left-sidebar{float:left;width:50%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-2,.layout-3col__col-4,.layout-3col__col-x:nth-child(2n),.layout-3col__second-left-sidebar{clear:none;float:left;width:50%;margin-left:50%;margin-right:-100%;padding-left:20px;padding-right:20px}}@media (min-width:999px){.layout-3col__full{float:left;width:100%;margin-left:0;margin-right:-100%}.layout-3col__left-content{float:left;width:66.66667%;margin-left:0;margin-right:-100%}.layout-3col__right-content{float:left;width:66.66667%;margin-left:33.33333%;margin-right:-100%}.layout-3col__first-left-sidebar,.layout-3col__left-sidebar,.layout-3col__second-left-sidebar{clear:right;float:right;width:33.33333%;margin-right:66.66667%;margin-left:-100%}.layout-3col__right-sidebar{clear:right;float:right;width:33.33333%;margin-right:0;margin-left:-100%}.layout-3col__col-1,.layout-3col__col-x:nth-child(3n+1){clear:both;float:left;width:33.33333%;margin-left:0;margin-right:-100%}.layout-3col__col-2,.layout-3col__col-x:nth-child(3n+2){clear:none;float:left;width:33.33333%;margin-left:33.33333%;margin-right:-100%}.layout-3col__col-3,.layout-3col__col-x:nth-child(3n){clear:none;float:left;width:33.33333%;margin-left:66.66667%;margin-right:-100%}.layout-3col__col-4{display:none}}.layout-3col__grid-item-container{padding-left:0;padding-right:0}.layout-3col__grid-item-container:before{content:"";display:table}.layout-3col__grid-item-container:after{content:"";display:table;clear:both}.layout-center{padding-left:10px;padding-right:10px;margin:0 auto;max-width:1180px}.no-sidebars .layout-center{max-width:780px}@media (min-width:777px){.layout-center{padding-left:20px;padding-right:20px}}.layout-center--shared-grid,.layout-center.layout-3col{padding-left:0;padding-right:0}.layout-swap{position:relative}@media (min-width:666px){.layout-swap{padding-top:62px}}@media (min-width:666px){.layout-swap__top{position:absolute;top:0;height:62px;width:100%}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box--is-focus,.box.is-focus,.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.button,[type=reset],[type=submit],button,html [type=button]{-moz-appearance:button;-webkit-appearance:button}.button,[type=button],[type=reset],[type=submit],button{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;margin-right:1.05682rem;margin-bottom:1.05682rem;display:inline-block;padding:2px 10px;line-height:inherit;text-decoration:none;cursor:pointer;color:#333;text-align:center;background-image:linear-gradient(#f6f6f6,#e2e2e2);border:1px solid #e4e4e4;border-left-color:#d2d2d2;border-right-color:#d2d2d2;border-bottom-color:#b4b4b4;border-radius:2px}.button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}.button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{text-decoration:none;color:#333}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{border-color:#555;text-shadow:#333 0 -1px 0;background:#666;color:#fff}[disabled].button,[disabled][type=button],[disabled][type=reset],[disabled][type=submit],button[disabled]{cursor:default;color:#999;background-color:#eee;border-color:#eee;background-image:none;text-shadow:none}[disabled].button:active,[disabled].button:focus,[disabled].button:hover,[disabled][type=button]:active,[disabled][type=button]:focus,[disabled][type=button]:hover,[disabled][type=reset]:active,[disabled][type=reset]:focus,[disabled][type=reset]:hover,[disabled][type=submit]:active,[disabled][type=submit]:focus,[disabled][type=submit]:hover,button[disabled]:active,button[disabled]:focus,button[disabled]:hover{color:#999}.clearfix::before,.header::before{content:'';display:table}.clearfix::after,.header::after{content:'';display:table;clear:both}.header__logo{float:left;margin:0 10px 0 0;padding:0}.header__logo-image{vertical-align:bottom}.header__name-and-slogan{float:left}.header__site-name{margin:0}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}.header__site-slogan{margin:0}.header__secondary-menu{float:right}.header__region{clear:both}.hidden,html.js .element-hidden,html.js .js-hidden,html.js .js-hide{display:none}.highlight-mark,.new,.update{color:#c00;background-color:transparent}.inline-links,.inline.links{padding:0}.inline-links__item,.inline.links li{display:inline;list-style-type:none;padding:0 1em 0 0}.field-label-inline .field-label,.inline-sibling,span.field-label{display:inline;margin-right:10px}.field-label-inline .field-label *,.inline-sibling *,.inline-sibling__child,span.field-label *{display:inline}.field-label-inline .field-label+*,.field-label-inline .field-label+*>:first-child,.field-label-inline .field-label+*>:first-child>:first-child,.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent,span.field-label+*,span.field-label+*>:first-child,span.field-label+*>:first-child>:first-child{display:inline}.field-label-inline .field-items,.field-label-inline .field-label{float:none}@media print{.action-links,.book-navigation,.feed-icons,.forum-topic-navigation,.links,.print-none,.toolbar,aside,footer,nav{display:none}}.media-vimeo-preview-wrapper,.media-youtube-video,.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.media-vimeo-preview-wrapper iframe,.media-youtube-video iframe,.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.element-focusable,.element-invisible,.main-navigation .block-menu .block__title,.main-navigation .block-menu-block .block__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.element-focusable:active,.element-focusable:focus,.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}@media print{.breadcrumb{display:none}}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-help-link,.more-link{text-align:right}.more-help-link a,.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(../sass/navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.menu__item,.nav-menu__item{list-style-image:url(../sass/navigation/nav-menu/leaf.svg);list-style-type:square}.is-expanded.menu__item,.menu__item.is-expanded,.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(../sass/navigation/nav-menu/expanded.svg);list-style-type:circle}.is-collapsed.menu__item,.menu__item.is-collapsed,.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(../sass/navigation/nav-menu/collapsed.svg);list-style-type:disc}.menu a.active,.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.main-navigation .links,.main-navigation .menu,.navbar{margin:0;padding:0;text-align:left}.main-navigation .links li,.main-navigation .menu li,.navbar li,.navbar__item{float:left;padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}@media print{.pager{display:none}}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}@media print{.skip-link__wrapper{display:none}}article>.content ul,aside ul{display:table;list-style:none;padding:0}article>.content ul>li,aside ul>li{display:table-row}article>.content ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:'\2022'}@media (min-width:1111px){article>.content ul>li::before,aside ul>li::before{font-size:.88889rem}}article>.content ol,aside ol{display:table;list-style:none;padding:0}article>.content ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article>.content ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article>.content ol>li::before,aside ol>li::before{font-size:.88889rem}}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em;cursor:pointer;margin:5px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);border-radius:4px;background-color:#333}.slicknav_menu{box-sizing:border-box;background-color:#333;padding:2px}.slicknav_menu::after,.slicknav_menu::before{content:' ';display:table}.slicknav_menu::after{clear:both}.slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_no-text{margin:0}.slicknav_icon-bar{display:block;width:1.125em;height:3px;border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.25);background-color:#fff}.slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_nav{background-color:#fff;color:#000;margin:0;padding:0;list-style:none;overflow:hidden;clear:both}.slicknav_nav ul{display:block;list-style:none;overflow:hidden;padding:0;margin:0 0 0 20px}.slicknav_nav li{display:block}.slicknav_nav a{display:block;padding:5px 10px;margin:2px 5px;text-decoration:none;color:#000}.slicknav_nav a:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_row{display:block;padding:5px 10px;margin:2px 5px}.slicknav_row:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_arrow{margin:0 0 0 .4em}.slicknav_txtnode{margin-left:15px}.slicknav_item{cursor:pointer}.slicknav_item a{display:inline;padding:0;margin:0}.slicknav_parent-link a{display:inline;padding:0;margin:0}.slicknav_brand{float:left;color:#fff;line-height:30px;padding:7px 12px;height:44px}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer,article>header{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer,article>header{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}article>header{color:#999}article>header p{margin:.28182rem 0}@media (min-width:888px){article .submitted,article .tags{display:inline-block;padding-right:1rem}}article .tags ul{margin:0;padding:0}article .tags li,article .tags ul{display:inline}article .tags li{list-style-type:none}article .tags a{padding-right:.28182rem}article code{font-size:.81818rem;line-height:1.40909rem;word-wrap:break-word}article pre{color:#333;border-radius:3px;padding:5px;border:1px solid #ccc;background-color:#fff;overflow:auto;max-height:250px;max-width:550px}article pre>code{display:inline-block;white-space:pre}.title-submitted{margin-bottom:0}@media (min-width:666px){figure{display:table}figure img{display:block}figure.left{padding:0 .70455rem .70455rem 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:0 0 .70455rem .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption h4,figcaption p{margin:0}body{background-color:#eee}.layout-center{background-color:#fff}.header{padding-top:10px}@media (min-width:777px){.header{padding-top:20px}}@media (min-width:666px){.header__logo{float:left}}@media (min-width:666px){.header__site-name{float:left}}@media (min-width:666px){.header__region{float:right;clear:none}}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#333;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#666}.main-menu a.active,.main-menu a:active{background-color:#333;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #333}.footer p{margin:0}.search-form{padding-top:.70455rem}.search-text{font-size:1.09091rem;line-height:1.40909rem}.contact-form input,.contact-form textarea{margin-bottom:1.05682rem;width:95%}.contact-form button{display:block}@media print{.layout-center,body{background-color:#fff}.layout-swap{padding-top:0}[role=main]{width:100%}.layout-swap__top{border-bottom:0}:link,:visited{text-decoration:underline}a[href]::after{content:''}}
\ No newline at end of file
diff --git a/styleguide/index.html b/styleguide/index.html
index a0590ea..02f7f33 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-embedded-img.html b/styleguide/item-base-embedded-img.html
index e6e4a1c..07712d2 100644
--- a/styleguide/item-base-embedded-img.html
+++ b/styleguide/item-base-embedded-img.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-embedded-svg.html b/styleguide/item-base-embedded-svg.html
index e0b3210..37204eb 100644
--- a/styleguide/item-base-embedded-svg.html
+++ b/styleguide/item-base-embedded-svg.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -146,7 +151,7 @@
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/embedded/_embedded.scss</code>, line 35
+          Source: <code>base/embedded/_embedded.scss</code>, line 30
         </div>
           </div>
   </article>
diff --git a/styleguide/item-base-embedded.html b/styleguide/item-base-embedded.html
index 870e09d..b3c69f3 100644
--- a/styleguide/item-base-embedded.html
+++ b/styleguide/item-base-embedded.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-blockquote.html b/styleguide/item-base-grouping-blockquote.html
index 8b57562..ababb99 100644
--- a/styleguide/item-base-grouping-blockquote.html
+++ b/styleguide/item-base-grouping-blockquote.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-figure.html b/styleguide/item-base-grouping-figure.html
index cfdec8b..7e57725 100644
--- a/styleguide/item-base-grouping-figure.html
+++ b/styleguide/item-base-grouping-figure.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -149,7 +154,7 @@ caption of the figure.</p>
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 115
+          Source: <code>base/grouping/_grouping.scss</code>, line 106
         </div>
           </div>
   </article>
diff --git a/styleguide/item-base-grouping-hr.html b/styleguide/item-base-grouping-hr.html
index ed1cd8e..8ee6aa4 100644
--- a/styleguide/item-base-grouping-hr.html
+++ b/styleguide/item-base-grouping-hr.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -148,7 +153,7 @@ ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 136
+          Source: <code>base/grouping/_grouping.scss</code>, line 127
         </div>
           </div>
   </article>
diff --git a/styleguide/item-base-grouping-lists-dl.html b/styleguide/item-base-grouping-lists-dl.html
index d8dea52..71e447e 100644
--- a/styleguide/item-base-grouping-lists-dl.html
+++ b/styleguide/item-base-grouping-lists-dl.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-lists-ol.html b/styleguide/item-base-grouping-lists-ol.html
index 26ffbeb..7398a88 100644
--- a/styleguide/item-base-grouping-lists-ol.html
+++ b/styleguide/item-base-grouping-lists-ol.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-lists-ul.html b/styleguide/item-base-grouping-lists-ul.html
index a704727..38def71 100644
--- a/styleguide/item-base-grouping-lists-ul.html
+++ b/styleguide/item-base-grouping-lists-ul.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-lists.html b/styleguide/item-base-grouping-lists.html
index 98da0b5..14aac60 100644
--- a/styleguide/item-base-grouping-lists.html
+++ b/styleguide/item-base-grouping-lists.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-grouping-p.html b/styleguide/item-base-grouping-p.html
index c45e694..629dcf0 100644
--- a/styleguide/item-base-grouping-p.html
+++ b/styleguide/item-base-grouping-p.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -156,7 +161,7 @@ erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 155
+          Source: <code>base/grouping/_grouping.scss</code>, line 146
         </div>
           </div>
   </article>
diff --git a/styleguide/item-base-grouping-pre.html b/styleguide/item-base-grouping-pre.html
index 07c6255..2d2125e 100644
--- a/styleguide/item-base-grouping-pre.html
+++ b/styleguide/item-base-grouping-pre.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -139,7 +144,7 @@ fragments of computer code, ASCII art, etc.</p>
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 173
+          Source: <code>base/grouping/_grouping.scss</code>, line 164
         </div>
           </div>
   </article>
diff --git a/styleguide/item-base-grouping.html b/styleguide/item-base-grouping.html
index 01b8013..82f2004 100644
--- a/styleguide/item-base-grouping.html
+++ b/styleguide/item-base-grouping.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-headings.html b/styleguide/item-base-headings.html
index 90b3663..97b5220 100644
--- a/styleguide/item-base-headings.html
+++ b/styleguide/item-base-headings.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-link.html b/styleguide/item-base-link.html
index d15875d..8c38428 100644
--- a/styleguide/item-base-link.html
+++ b/styleguide/item-base-link.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-table.html b/styleguide/item-base-table.html
index 62aef2d..9962cf1 100644
--- a/styleguide/item-base-table.html
+++ b/styleguide/item-base-table.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-abbr.html b/styleguide/item-base-text-abbr.html
index a6bec16..cee978f 100644
--- a/styleguide/item-base-text-abbr.html
+++ b/styleguide/item-base-text-abbr.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-b.html b/styleguide/item-base-text-b.html
index 6dac017..13a01fd 100644
--- a/styleguide/item-base-text-b.html
+++ b/styleguide/item-base-text-b.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-cite.html b/styleguide/item-base-text-cite.html
index 68973fb..2369b87 100644
--- a/styleguide/item-base-text-cite.html
+++ b/styleguide/item-base-text-cite.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-code.html b/styleguide/item-base-text-code.html
index 54133a5..f8ba4f2 100644
--- a/styleguide/item-base-text-code.html
+++ b/styleguide/item-base-text-code.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-del.html b/styleguide/item-base-text-del.html
index 62d8d5a..68d8513 100644
--- a/styleguide/item-base-text-del.html
+++ b/styleguide/item-base-text-del.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-dfn.html b/styleguide/item-base-text-dfn.html
index 42308df..3cfccfb 100644
--- a/styleguide/item-base-text-dfn.html
+++ b/styleguide/item-base-text-dfn.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-i.html b/styleguide/item-base-text-i.html
index be07ba3..0930d2e 100644
--- a/styleguide/item-base-text-i.html
+++ b/styleguide/item-base-text-i.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-ins.html b/styleguide/item-base-text-ins.html
index b7840c7..4111a65 100644
--- a/styleguide/item-base-text-ins.html
+++ b/styleguide/item-base-text-ins.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-mark.html b/styleguide/item-base-text-mark.html
index a33d81a..f9c51c7 100644
--- a/styleguide/item-base-text-mark.html
+++ b/styleguide/item-base-text-mark.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-q.html b/styleguide/item-base-text-q.html
index 889b8b2..dd20695 100644
--- a/styleguide/item-base-text-q.html
+++ b/styleguide/item-base-text-q.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-s.html b/styleguide/item-base-text-s.html
index 1fb78b4..4b3733f 100644
--- a/styleguide/item-base-text-s.html
+++ b/styleguide/item-base-text-s.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-small.html b/styleguide/item-base-text-small.html
index 09cb2ab..84a0011 100644
--- a/styleguide/item-base-text-small.html
+++ b/styleguide/item-base-text-small.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-sub.html b/styleguide/item-base-text-sub.html
index cd464af..67e9a94 100644
--- a/styleguide/item-base-text-sub.html
+++ b/styleguide/item-base-text-sub.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text-u.html b/styleguide/item-base-text-u.html
index 61a54ec..f916bb7 100644
--- a/styleguide/item-base-text-u.html
+++ b/styleguide/item-base-text-u.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base-text.html b/styleguide/item-base-text.html
index 0cd8eeb..e14c440 100644
--- a/styleguide/item-base-text.html
+++ b/styleguide/item-base-text.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-base.html b/styleguide/item-base.html
index be87c75..091f8a9 100644
--- a/styleguide/item-base.html
+++ b/styleguide/item-base.html
@@ -209,18 +209,23 @@
                     </ul>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-components-box.html b/styleguide/item-components-box.html
index aa3085c..e33c2f8 100644
--- a/styleguide/item-components-box.html
+++ b/styleguide/item-components-box.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-box">
             <span class="kss-title__ref">
-              4.1
+              5.1
               <span class="kss-title__permalink-hash">
                 components.box
               </span>
diff --git a/styleguide/item-components-clearfix.html b/styleguide/item-components-clearfix.html
index 41b87a5..dfe48c3 100644
--- a/styleguide/item-components-clearfix.html
+++ b/styleguide/item-components-clearfix.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-clearfix">
             <span class="kss-title__ref">
-              4.2
+              5.2
               <span class="kss-title__permalink-hash">
                 components.clearfix
               </span>
diff --git a/styleguide/item-components-divider.html b/styleguide/item-components-divider.html
index 07bdfb3..363ce30 100644
--- a/styleguide/item-components-divider.html
+++ b/styleguide/item-components-divider.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-divider">
             <span class="kss-title__ref">
-              4.3
+              5.3
               <span class="kss-title__permalink-hash">
                 components.divider
               </span>
diff --git a/styleguide/item-components-header.html b/styleguide/item-components-header.html
index 51e191b..5522d41 100644
--- a/styleguide/item-components-header.html
+++ b/styleguide/item-components-header.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-header">
             <span class="kss-title__ref">
-              4.4
+              5.4
               <span class="kss-title__permalink-hash">
                 components.header
               </span>
diff --git a/styleguide/item-components-hidden.html b/styleguide/item-components-hidden.html
index 6ff0b38..d9f2fe2 100644
--- a/styleguide/item-components-hidden.html
+++ b/styleguide/item-components-hidden.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-hidden">
             <span class="kss-title__ref">
-              4.5
+              5.5
               <span class="kss-title__permalink-hash">
                 components.hidden
               </span>
diff --git a/styleguide/item-components-highlight-mark.html b/styleguide/item-components-highlight-mark.html
index 73db727..0cb2184 100644
--- a/styleguide/item-components-highlight-mark.html
+++ b/styleguide/item-components-highlight-mark.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-highlight-mark">
             <span class="kss-title__ref">
-              4.6
+              5.6
               <span class="kss-title__permalink-hash">
                 components.highlight-mark
               </span>
diff --git a/styleguide/item-components-inline-links.html b/styleguide/item-components-inline-links.html
index 7c60063..44ee7c7 100644
--- a/styleguide/item-components-inline-links.html
+++ b/styleguide/item-components-inline-links.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-inline-links">
             <span class="kss-title__ref">
-              4.7
+              5.7
               <span class="kss-title__permalink-hash">
                 components.inline-links
               </span>
diff --git a/styleguide/item-components-inline-sibling.html b/styleguide/item-components-inline-sibling.html
index d2792ba..125551d 100644
--- a/styleguide/item-components-inline-sibling.html
+++ b/styleguide/item-components-inline-sibling.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-inline-sibling">
             <span class="kss-title__ref">
-              4.8
+              5.8
               <span class="kss-title__permalink-hash">
                 components.inline-sibling
               </span>
diff --git a/styleguide/item-components-print-none.html b/styleguide/item-components-print-none.html
index b9e18db..06f3973 100644
--- a/styleguide/item-components-print-none.html
+++ b/styleguide/item-components-print-none.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-print-none">
             <span class="kss-title__ref">
-              4.9
+              5.9
               <span class="kss-title__permalink-hash">
                 components.print-none
               </span>
diff --git a/styleguide/item-components-responsive-video.html b/styleguide/item-components-responsive-video.html
index 2a3bc53..c1a384e 100644
--- a/styleguide/item-components-responsive-video.html
+++ b/styleguide/item-components-responsive-video.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-responsive-video">
             <span class="kss-title__ref">
-              4.10
+              5.10
               <span class="kss-title__permalink-hash">
                 components.responsive-video
               </span>
diff --git a/styleguide/item-components-visually-hidden.html b/styleguide/item-components-visually-hidden.html
index ee9e15b..112fb68 100644
--- a/styleguide/item-components-visually-hidden.html
+++ b/styleguide/item-components-visually-hidden.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-visually-hidden">
             <span class="kss-title__ref">
-              4.11
+              5.11
               <span class="kss-title__permalink-hash">
                 components.visually-hidden
               </span>
diff --git a/styleguide/item-components-watermark.html b/styleguide/item-components-watermark.html
index 42761ca..b4fdcb6 100644
--- a/styleguide/item-components-watermark.html
+++ b/styleguide/item-components-watermark.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-watermark">
             <span class="kss-title__ref">
-              4.12
+              5.12
               <span class="kss-title__permalink-hash">
                 components.watermark
               </span>
diff --git a/styleguide/item-components-wireframe.html b/styleguide/item-components-wireframe.html
index c9f0a0b..f6b8e9b 100644
--- a/styleguide/item-components-wireframe.html
+++ b/styleguide/item-components-wireframe.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-wireframe">
             <span class="kss-title__ref">
-              4.13
+              5.13
               <span class="kss-title__permalink-hash">
                 components.wireframe
               </span>
diff --git a/styleguide/item-components.html b/styleguide/item-components.html
index 0ccb210..207fe5f 100644
--- a/styleguide/item-components.html
+++ b/styleguide/item-components.html
@@ -39,90 +39,95 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
-                <span class="kss-nav__ref ">4.1</span
+                <span class="kss-nav__ref ">5.1</span
                 ><span class="kss-nav__name">Box</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
-                <span class="kss-nav__ref ">4.2</span
+                <span class="kss-nav__ref ">5.2</span
                 ><span class="kss-nav__name">Clearfix</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
-                <span class="kss-nav__ref ">4.3</span
+                <span class="kss-nav__ref ">5.3</span
                 ><span class="kss-nav__name">Divider</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
-                <span class="kss-nav__ref ">4.4</span
+                <span class="kss-nav__ref ">5.4</span
                 ><span class="kss-nav__name">Branding header</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
-                <span class="kss-nav__ref ">4.5</span
+                <span class="kss-nav__ref ">5.5</span
                 ><span class="kss-nav__name">Hidden</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
-                <span class="kss-nav__ref ">4.6</span
+                <span class="kss-nav__ref ">5.6</span
                 ><span class="kss-nav__name">Highlight mark</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
-                <span class="kss-nav__ref ">4.7</span
+                <span class="kss-nav__ref ">5.7</span
                 ><span class="kss-nav__name">Inline links</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
-                <span class="kss-nav__ref ">4.8</span
+                <span class="kss-nav__ref ">5.8</span
                 ><span class="kss-nav__name">Inline sibling</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
-                <span class="kss-nav__ref ">4.9</span
+                <span class="kss-nav__ref ">5.9</span
                 ><span class="kss-nav__name">Do not print</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
-                <span class="kss-nav__ref ">4.10</span
+                <span class="kss-nav__ref ">5.10</span
                 ><span class="kss-nav__name">Responsive video</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
-                <span class="kss-nav__ref ">4.11</span
+                <span class="kss-nav__ref ">5.11</span
                 ><span class="kss-nav__name">Visually hidden</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
-                <span class="kss-nav__ref ">4.12</span
+                <span class="kss-nav__ref ">5.12</span
                 ><span class="kss-nav__name">Watermark</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
-                <span class="kss-nav__ref ">4.13</span
+                <span class="kss-nav__ref ">5.13</span
                 ><span class="kss-nav__name">Wireframe</span>
               </a>
             </li>
@@ -130,7 +135,7 @@
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -144,7 +149,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-components">
             <span class="kss-title__ref">
-              4
+              5
               <span class="kss-title__permalink-hash">
                 components
               </span>
diff --git a/styleguide/item-forms-base-fieldset.html b/styleguide/item-forms-base-fieldset.html
new file mode 100644
index 0000000..20ea69c
--- /dev/null
+++ b/styleguide/item-forms-base-fieldset.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
+            <span class="kss-title__ref">
+              3.1.1
+              <span class="kss-title__permalink-hash">
+                forms.base.fieldset
+              </span>
+            </span>
+            Fieldsets
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-fieldset" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-fieldset" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;fieldset&gt;</code> element groups a set of form fields, optionally under a
+common name given by the <code>&lt;legend&gt;</code> element.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <fieldset class="">
+  <legend>A fieldset</legend>
+  <label for="fieldsetText">Text input</label>
+  <input type="text" id="fieldsetText" placeholder="Text input">
+</fieldset>
+
+<fieldset class="" disabled>
+  <legend>A disabled fieldset</legend>
+  <div>
+    <label for="fieldsetText2">Disabled text input</label>
+    <input type="text" id="fieldsetText2" placeholder="Disabled input">
+  </div>
+  <div>
+    <label for="fieldsetSelect">Disabled select menu</label>
+    <select id="fieldsetSelect">
+      <option>Disabled select</option>
+    </select>
+  </div>
+  <div>
+    <label><input type="checkbox"> Can't check this</label>
+  </div>
+</fieldset>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-fieldset.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;{{modifier_class}}&quot;&gt;
+  &lt;legend&gt;A fieldset&lt;/legend&gt;
+  &lt;label for=&quot;fieldsetText&quot;&gt;Text input&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;fieldsetText&quot; placeholder=&quot;Text input&quot;&gt;
+&lt;/fieldset&gt;
+
+&lt;fieldset class=&quot;{{modifier_class}}&quot; disabled&gt;
+  &lt;legend&gt;A disabled fieldset&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;label for=&quot;fieldsetText2&quot;&gt;Disabled text input&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;fieldsetText2&quot; placeholder=&quot;Disabled input&quot;&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for=&quot;fieldsetSelect&quot;&gt;Disabled select menu&lt;/label&gt;
+    &lt;select id=&quot;fieldsetSelect&quot;&gt;
+      &lt;option&gt;Disabled select&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Can&#039;t check this&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 158
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-input-checkbox.html b/styleguide/item-forms-base-input-checkbox.html
new file mode 100644
index 0000000..a619cde
--- /dev/null
+++ b/styleguide/item-forms-base-input-checkbox.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
+            <span class="kss-title__ref">
+              3.1.3
+              <span class="kss-title__permalink-hash">
+                forms.base.input-checkbox
+              </span>
+            </span>
+            Checkboxes
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-input-checkbox" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input-checkbox" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;checkbox&#39;</code> attribute set, the form
+field is displayed as a checkbox.</p>
+<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
+implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label><input type="checkbox" class=""> Check me out</label>
+</div>
+
+<div>
+  <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input-checkbox.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;{{modifier_class}}&quot;&gt; Check me out&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;{{modifier_class}}&quot; value=&quot;&quot; disabled&gt; Option two is disabled&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 126
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-input-radio.html b/styleguide/item-forms-base-input-radio.html
new file mode 100644
index 0000000..984d576
--- /dev/null
+++ b/styleguide/item-forms-base-input-radio.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
+            <span class="kss-title__ref">
+              3.1.4
+              <span class="kss-title__permalink-hash">
+                forms.base.input-radio
+              </span>
+            </span>
+            Radio buttons
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-input-radio" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input-radio" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;radio&#39;</code> attribute set, the form field
+is displayed as a radio button.</p>
+<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
+implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
+</div>
+
+<div>
+  <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
+</div>
+
+<div>
+  <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input-radio.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option1&quot; name=&quot;example-radio&quot; checked&gt; Option one&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option2&quot; name=&quot;example-radio&quot;&gt; Option two&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option3&quot; name=&quot;example-radio&quot; disabled&gt; Option three is disabled&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 138
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-input.html b/styleguide/item-forms-base-input.html
new file mode 100644
index 0000000..c60d37a
--- /dev/null
+++ b/styleguide/item-forms-base-input.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-input" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input">
+            <span class="kss-title__ref">
+              3.1.2
+              <span class="kss-title__permalink-hash">
+                forms.base.input
+              </span>
+            </span>
+            Inputs
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-input" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;input&gt;</code> element is mostly used for text-based inputs that include the
+HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>password</code>, <code>date</code>,
+<code>time</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>file</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="inputText">Text</label>
+  <input type="text" class="" id="inputText" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputSearch">Search</label>
+  <input type="search" class="" id="inputSearch" placeholder="Search">
+</div>
+<div>
+  <label for="inputTel">Telephone</label>
+  <input type="text" class="" id="inputTel" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputURL">URL</label>
+  <input type="url" class="" id="inputURL" placeholder="Enter a URL">
+</div>
+<div>
+  <label for="inputEmail">Email address</label>
+  <input type="email" class="" id="inputEmail" placeholder="Enter email">
+</div>
+<div>
+  <label for="inputPassword">Password</label>
+  <input type="password" class="" id="inputPassword" placeholder="Password">
+</div>
+<div>
+  <label for="inputDate">Date</label>
+  <input type="date" class="" id="inputDate" placeholder="Enter a date">
+</div>
+<div>
+  <label for="inputTime">Time</label>
+  <input type="time" class="" id="inputTime" placeholder="Enter a time">
+</div>
+<div>
+  <label for="inputNumber">Number</label>
+  <input type="number" class="" id="inputNumber" placeholder="Enter a number">
+</div>
+<div>
+  <label for="inputRange">Range</label>
+  <input type="range" class="" id="inputRange" placeholder="Enter a range">
+</div>
+<div>
+  <label for="inputColor">Color</label>
+  <input type="color" class="" id="inputColor" placeholder="Enter a color">
+</div>
+<div>
+  <label for="inputFile">File input</label>
+  <input type="file" class="" id="inputFile">
+</div>
+
+<div>
+  <label for="inputText">Disabled text</label>
+  <input type="text" class="" disabled id="inputText" placeholder="Disabled text">
+</div>
+<div>
+  <label for="inputSearch">Disabled search</label>
+  <input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
+</div>
+<div>
+  <label for="inputTel">Disabled telephone</label>
+  <input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
+</div>
+<div>
+  <label for="inputURL">Disabled URL</label>
+  <input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
+</div>
+<div>
+  <label for="inputEmail">Disabled email address</label>
+  <input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
+</div>
+<div>
+  <label for="inputPassword">Disabled password</label>
+  <input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
+</div>
+<div>
+  <label for="inputDate">Disabled date</label>
+  <input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
+</div>
+<div>
+  <label for="inputTime">Disabled time</label>
+  <input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
+</div>
+<div>
+  <label for="inputNumber">Disabled number</label>
+  <input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
+</div>
+<div>
+  <label for="inputRange">Disabled range</label>
+  <input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
+</div>
+<div>
+  <label for="inputColor">Disabled color</label>
+  <input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
+</div>
+<div>
+  <label for="inputFile">Disabled file input</label>
+  <input type="file" class="" disabled id="inputFile">
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;inputText&quot;&gt;Text&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputText&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputSearch&quot;&gt;Search&lt;/label&gt;
+  &lt;input type=&quot;search&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputSearch&quot; placeholder=&quot;Search&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTel&quot;&gt;Telephone&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputTel&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputURL&quot;&gt;URL&lt;/label&gt;
+  &lt;input type=&quot;url&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputURL&quot; placeholder=&quot;Enter a URL&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputEmail&quot;&gt;Email address&lt;/label&gt;
+  &lt;input type=&quot;email&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputEmail&quot; placeholder=&quot;Enter email&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputPassword&quot;&gt;Password&lt;/label&gt;
+  &lt;input type=&quot;password&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputPassword&quot; placeholder=&quot;Password&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputDate&quot;&gt;Date&lt;/label&gt;
+  &lt;input type=&quot;date&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputDate&quot; placeholder=&quot;Enter a date&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTime&quot;&gt;Time&lt;/label&gt;
+  &lt;input type=&quot;time&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputTime&quot; placeholder=&quot;Enter a time&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputNumber&quot;&gt;Number&lt;/label&gt;
+  &lt;input type=&quot;number&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputNumber&quot; placeholder=&quot;Enter a number&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputRange&quot;&gt;Range&lt;/label&gt;
+  &lt;input type=&quot;range&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputRange&quot; placeholder=&quot;Enter a range&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputColor&quot;&gt;Color&lt;/label&gt;
+  &lt;input type=&quot;color&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputColor&quot; placeholder=&quot;Enter a color&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputFile&quot;&gt;File input&lt;/label&gt;
+  &lt;input type=&quot;file&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputFile&quot;&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;inputText&quot;&gt;Disabled text&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputText&quot; placeholder=&quot;Disabled text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputSearch&quot;&gt;Disabled search&lt;/label&gt;
+  &lt;input type=&quot;search&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputSearch&quot; placeholder=&quot;Disabled search&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTel&quot;&gt;Disabled telephone&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputTel&quot; placeholder=&quot;Disabled telephone&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputURL&quot;&gt;Disabled URL&lt;/label&gt;
+  &lt;input type=&quot;url&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputURL&quot; placeholder=&quot;Disabled URL&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputEmail&quot;&gt;Disabled email address&lt;/label&gt;
+  &lt;input type=&quot;email&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputEmail&quot; placeholder=&quot;Disabled email&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputPassword&quot;&gt;Disabled password&lt;/label&gt;
+  &lt;input type=&quot;password&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputPassword&quot; placeholder=&quot;Disabled password&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputDate&quot;&gt;Disabled date&lt;/label&gt;
+  &lt;input type=&quot;date&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputDate&quot; placeholder=&quot;Disabled date&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTime&quot;&gt;Disabled time&lt;/label&gt;
+  &lt;input type=&quot;time&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputTime&quot; placeholder=&quot;Disabled time&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputNumber&quot;&gt;Disabled number&lt;/label&gt;
+  &lt;input type=&quot;number&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputNumber&quot; placeholder=&quot;Disabled number&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputRange&quot;&gt;Disabled range&lt;/label&gt;
+  &lt;input type=&quot;range&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputRange&quot; placeholder=&quot;Disabled range&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputColor&quot;&gt;Disabled color&lt;/label&gt;
+  &lt;input type=&quot;color&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputColor&quot; placeholder=&quot;Disabled color&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputFile&quot;&gt;Disabled file input&lt;/label&gt;
+  &lt;input type=&quot;file&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputFile&quot;&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 92
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-label.html b/styleguide/item-forms-base-label.html
new file mode 100644
index 0000000..eb9eeae
--- /dev/null
+++ b/styleguide/item-forms-base-label.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-label" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-label">
+            <span class="kss-title__ref">
+              3.1.5
+              <span class="kss-title__permalink-hash">
+                forms.base.label
+              </span>
+            </span>
+            Labels
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-label" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-label" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;label&gt;</code> element represents a caption of a form field. The label can be
+associated with a specific form control by using the <code>for</code> attribute or by
+putting the form control inside the label element itself.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label class="" for="lableInputText">A label for a text input</label>
+  <input type="text" id="lableInputText" placeholder="Enter some text">
+</div>
+
+<div>
+  <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-label.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label class=&quot;{{modifier_class}}&quot; for=&quot;lableInputText&quot;&gt;A label for a text input&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;lableInputText&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label class=&quot;{{modifier_class}}&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt; A label wrapped around a checkbox&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 188
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-select.html b/styleguide/item-forms-base-select.html
new file mode 100644
index 0000000..5c7a608
--- /dev/null
+++ b/styleguide/item-forms-base-select.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-select" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-select">
+            <span class="kss-title__ref">
+              3.1.6
+              <span class="kss-title__permalink-hash">
+                forms.base.select
+              </span>
+            </span>
+            Select list
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-select" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-select" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;select&gt;</code> element represents a form field for selecting amongst a set of
+options.</p>
+<p>Known limitation: by default, Chrome and Safari on OS X allow very limited
+styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is set.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="selectDropdown">A standard drop-down</label>
+  <select class="" id="selectDropdown">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectMultiItem">A multi-item select field</label>
+  <select class="" id="selectMultiItem" multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectDisabled">A disabled drop-down</label>
+  <select class="" id="selectDisabled" disabled>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-select.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;selectDropdown&quot;&gt;A standard drop-down&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectDropdown&quot;&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;selectMultiItem&quot;&gt;A multi-item select field&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectMultiItem&quot; multiple&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;selectDisabled&quot;&gt;A disabled drop-down&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectDisabled&quot; disabled&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 204
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base-textarea.html b/styleguide/item-forms-base-textarea.html
new file mode 100644
index 0000000..d025c65
--- /dev/null
+++ b/styleguide/item-forms-base-textarea.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base-textarea" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-textarea">
+            <span class="kss-title__ref">
+              3.1.7
+              <span class="kss-title__permalink-hash">
+                forms.base.textarea
+              </span>
+            </span>
+            Text areas
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-base-textarea" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-textarea" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;textarea&gt;</code> element represents a multi-line plain text form field.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="exampleTextarea">Text area</label>
+  <textarea class="" rows="3" id="exampleTextarea"></textarea>
+</div>
+<div>
+  <label for="exampleTextarea">Disabled text area</label>
+  <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-textarea.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;exampleTextarea&quot;&gt;Text area&lt;/label&gt;
+  &lt;textarea class=&quot;{{modifier_class}}&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot;&gt;&lt;/textarea&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;exampleTextarea&quot;&gt;Disabled text area&lt;/label&gt;
+  &lt;textarea class=&quot;{{modifier_class}}&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot; disabled&gt;&lt;/textarea&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 225
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-base.html b/styleguide/item-forms-base.html
new file mode 100644
index 0000000..6969174
--- /dev/null
+++ b/styleguide/item-forms-base.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-base" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div class="kss-style">
+                <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-forms-base">
+            <span class="kss-title__ref">
+              3.1
+              <span class="kss-title__permalink-hash">
+                forms.base
+              </span>
+            </span>
+            Form defaults
+          </a>
+        </h2>
+
+        
+                  <div class="kss-description">
+            <p>These are the default base styles applied to HTML form elements.</p>
+<p>Component classes can override these styles, but if no class applies a style
+to an HTML form element, these styles will be the ones displayed.</p>
+
+          </div>
+        
+              </div>
+
+      
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 3
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms-button.html b/styleguide/item-forms-button.html
new file mode 100644
index 0000000..ef7331e
--- /dev/null
+++ b/styleguide/item-forms-button.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms-button" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div class="kss-style">
+                <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-forms-button">
+            <span class="kss-title__ref">
+              3.2
+              <span class="kss-title__permalink-hash">
+                forms.button
+              </span>
+            </span>
+            Button
+          </a>
+        </h2>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-forms-button" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-button" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>In addition to the default styling of <code>&lt;button&gt;</code> and
+<code>&lt;input type=&quot;submit|image|reset|button&quot;&gt;</code> elements, the <code>.button</code> class and
+its variants can apply buttons styles to various elements (like an <code>&lt;a&gt;</code>
+link).</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples          </div>
+
+                      <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+          
+          <div class="kss-modifier__example">
+            <p>
+  <button class="button " type="button">Standard button</button>
+  <button class="button " type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button " type="submit">Submit button</button>
+  <button class="button " type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button " type="reset">Reset button</button>
+  <button class="button " type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button " type="button" value="Input button">
+  <input class="button " type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button " type="submit" value="Input submit button">
+  <input class="button " type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button " type="reset" value="Input reset button">
+  <input class="button " type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button " href="#">Link button</a>
+  <a class="button " disabled href="#">Disabled link button</a>
+</p>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                      <div class="kss-modifier__name kss-style">
+              :hover
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Hover styling.
+            </div>
+            <div class="kss-modifier__example">
+              <p>
+  <button class="button pseudo-class-hover" type="button">Standard button</button>
+  <button class="button pseudo-class-hover" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button pseudo-class-hover" type="submit">Submit button</button>
+  <button class="button pseudo-class-hover" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button pseudo-class-hover" type="reset">Reset button</button>
+  <button class="button pseudo-class-hover" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="button" value="Input button">
+  <input class="button pseudo-class-hover" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="submit" value="Input submit button">
+  <input class="button pseudo-class-hover" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="reset" value="Input reset button">
+  <input class="button pseudo-class-hover" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button pseudo-class-hover" href="#">Link button</a>
+  <a class="button pseudo-class-hover" disabled href="#">Disabled link button</a>
+</p>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                      <div class="kss-modifier__name kss-style">
+              :active
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Depressed button styling.
+            </div>
+            <div class="kss-modifier__example">
+              <p>
+  <button class="button pseudo-class-active" type="button">Standard button</button>
+  <button class="button pseudo-class-active" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button pseudo-class-active" type="submit">Submit button</button>
+  <button class="button pseudo-class-active" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button pseudo-class-active" type="reset">Reset button</button>
+  <button class="button pseudo-class-active" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="button" value="Input button">
+  <input class="button pseudo-class-active" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="submit" value="Input submit button">
+  <input class="button pseudo-class-active" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="reset" value="Input reset button">
+  <input class="button pseudo-class-active" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button pseudo-class-active" href="#">Link button</a>
+  <a class="button pseudo-class-active" disabled href="#">Disabled link button</a>
+</p>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>components/button/button.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot;&gt;Standard button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; disabled&gt;Disabled button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot;&gt;Submit button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; disabled&gt;Disabled submit button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot;&gt;Reset button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; disabled&gt;Disabled reset button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; value=&quot;Input button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; value=&quot;Disabled input button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; value=&quot;Input submit button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; value=&quot;Disabled input submit button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; value=&quot;Input reset button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; value=&quot;Disabled input reset button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;a class=&quot;button {{modifier_class}}&quot; href=&quot;#&quot;&gt;Link button&lt;/a&gt;
+  &lt;a class=&quot;button {{modifier_class}}&quot; disabled href=&quot;#&quot;&gt;Disabled link button&lt;/a&gt;
+&lt;/p&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>components/button/_button.scss</code>, line 1
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-forms.html b/styleguide/item-forms.html
new file mode 100644
index 0000000..bae0205
--- /dev/null
+++ b/styleguide/item-forms.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+                  <ul class="kss-nav__menu-child">
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
+                <span class="kss-nav__ref ">3.1</span
+                ><span class="kss-nav__name">Form defaults</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
+                ><span class="kss-nav__name">Fieldsets</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.2</span
+                ><span class="kss-nav__name">Inputs</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.3</span
+                ><span class="kss-nav__name">Checkboxes</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.4</span
+                ><span class="kss-nav__name">Radio buttons</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.5</span
+                ><span class="kss-nav__name">Labels</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.6</span
+                ><span class="kss-nav__name">Select list</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.7</span
+                ><span class="kss-nav__name">Text areas</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
+                <span class="kss-nav__ref ">3.2</span
+                ><span class="kss-nav__name">Button</span>
+              </a>
+            </li>
+                    </ul>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div class="kss-style">
+                <h1 class="kss-title kss-title--level-1">
+          <a class="kss-title__permalink" href="#kssref-forms">
+            <span class="kss-title__ref">
+              3
+              <span class="kss-title__permalink-hash">
+                forms
+              </span>
+            </span>
+            forms
+          </a>
+        </h1>
+
+        
+        
+              </div>
+
+      
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/item-layouts-layout-3col.html b/styleguide/item-layouts-layout-3col.html
index 9b9423f..48c0a96 100644
--- a/styleguide/item-layouts-layout-3col.html
+++ b/styleguide/item-layouts-layout-3col.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-3col">
             <span class="kss-title__ref">
-              3.2
+              4.2
               <span class="kss-title__permalink-hash">
                 layouts.layout-3col
               </span>
diff --git a/styleguide/item-layouts-layout-center.html b/styleguide/item-layouts-layout-center.html
index 99f586b..177c1a1 100644
--- a/styleguide/item-layouts-layout-center.html
+++ b/styleguide/item-layouts-layout-center.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-center">
             <span class="kss-title__ref">
-              3.1
+              4.1
               <span class="kss-title__permalink-hash">
                 layouts.layout-center
               </span>
diff --git a/styleguide/item-layouts-layout-swap.html b/styleguide/item-layouts-layout-swap.html
index 1d19fd2..29243de 100644
--- a/styleguide/item-layouts-layout-swap.html
+++ b/styleguide/item-layouts-layout-swap.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-swap">
             <span class="kss-title__ref">
-              3.3
+              4.3
               <span class="kss-title__permalink-hash">
                 layouts.layout-swap
               </span>
diff --git a/styleguide/item-layouts.html b/styleguide/item-layouts.html
index e970e13..6a31be3 100644
--- a/styleguide/item-layouts.html
+++ b/styleguide/item-layouts.html
@@ -39,25 +39,30 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-center">
-                <span class="kss-nav__ref ">3.1</span
+                <span class="kss-nav__ref ">4.1</span
                 ><span class="kss-nav__name">Layout Center</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-3col">
-                <span class="kss-nav__ref ">3.2</span
+                <span class="kss-nav__ref ">4.2</span
                 ><span class="kss-nav__name">Responsive 3-column grid</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-swap">
-                <span class="kss-nav__ref ">3.3</span
+                <span class="kss-nav__ref ">4.3</span
                 ><span class="kss-nav__name">Layout swap</span>
               </a>
             </li>
@@ -65,12 +70,12 @@
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -84,7 +89,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-layouts">
             <span class="kss-title__ref">
-              3
+              4
               <span class="kss-title__permalink-hash">
                 layouts
               </span>
diff --git a/styleguide/item-navigation-breadcrumb.html b/styleguide/item-navigation-breadcrumb.html
index b6a61e7..b2b66f5 100644
--- a/styleguide/item-navigation-breadcrumb.html
+++ b/styleguide/item-navigation-breadcrumb.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-breadcrumb">
             <span class="kss-title__ref">
-              5.1
+              6.1
               <span class="kss-title__permalink-hash">
                 navigation.breadcrumb
               </span>
diff --git a/styleguide/item-navigation-more-link.html b/styleguide/item-navigation-more-link.html
index 25e7bcd..38142cf 100644
--- a/styleguide/item-navigation-more-link.html
+++ b/styleguide/item-navigation-more-link.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-more-link">
             <span class="kss-title__ref">
-              5.2
+              6.2
               <span class="kss-title__permalink-hash">
                 navigation.more-link
               </span>
diff --git a/styleguide/item-navigation-nav-menu.html b/styleguide/item-navigation-nav-menu.html
index 7e5b2bd..b4badc4 100644
--- a/styleguide/item-navigation-nav-menu.html
+++ b/styleguide/item-navigation-nav-menu.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-nav-menu">
             <span class="kss-title__ref">
-              5.3
+              6.3
               <span class="kss-title__permalink-hash">
                 navigation.nav-menu
               </span>
diff --git a/styleguide/item-navigation-navbar.html b/styleguide/item-navigation-navbar.html
index adbf38c..821303e 100644
--- a/styleguide/item-navigation-navbar.html
+++ b/styleguide/item-navigation-navbar.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-navbar">
             <span class="kss-title__ref">
-              5.4
+              6.4
               <span class="kss-title__permalink-hash">
                 navigation.navbar
               </span>
diff --git a/styleguide/item-navigation-pager.html b/styleguide/item-navigation-pager.html
index c4cb086..cf2b9d3 100644
--- a/styleguide/item-navigation-pager.html
+++ b/styleguide/item-navigation-pager.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-pager">
             <span class="kss-title__ref">
-              5.5
+              6.5
               <span class="kss-title__permalink-hash">
                 navigation.pager
               </span>
diff --git a/styleguide/item-navigation-skip-link.html b/styleguide/item-navigation-skip-link.html
index aa89474..603b34b 100644
--- a/styleguide/item-navigation-skip-link.html
+++ b/styleguide/item-navigation-skip-link.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -64,7 +69,7 @@
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-skip-link">
             <span class="kss-title__ref">
-              5.6
+              6.6
               <span class="kss-title__permalink-hash">
                 navigation.skip-link
               </span>
diff --git a/styleguide/item-navigation.html b/styleguide/item-navigation.html
index 5817579..ffe7f84 100644
--- a/styleguide/item-navigation.html
+++ b/styleguide/item-navigation.html
@@ -39,53 +39,58 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-breadcrumb">
-                <span class="kss-nav__ref ">5.1</span
+                <span class="kss-nav__ref ">6.1</span
                 ><span class="kss-nav__name">Breadcrumb navigation</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-more-link">
-                <span class="kss-nav__ref ">5.2</span
+                <span class="kss-nav__ref ">6.2</span
                 ><span class="kss-nav__name">&quot;More&quot; link</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-nav-menu">
-                <span class="kss-nav__ref ">5.3</span
+                <span class="kss-nav__ref ">6.3</span
                 ><span class="kss-nav__name">Nav menu</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-navbar">
-                <span class="kss-nav__ref ">5.4</span
+                <span class="kss-nav__ref ">6.4</span
                 ><span class="kss-nav__name">Navbar</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-pager">
-                <span class="kss-nav__ref ">5.5</span
+                <span class="kss-nav__ref ">6.5</span
                 ><span class="kss-nav__name">Pager</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-skip-link">
-                <span class="kss-nav__ref ">5.6</span
+                <span class="kss-nav__ref ">6.6</span
                 ><span class="kss-nav__name">Skip link</span>
               </a>
             </li>
@@ -102,7 +107,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-navigation">
             <span class="kss-title__ref">
-              5
+              6
               <span class="kss-title__permalink-hash">
                 navigation
               </span>
@@ -122,7 +127,7 @@ page navigation.</p>
 
       
               <div class="kss-source kss-style">
-          Source: <code>styles.scss</code>, line 64
+          Source: <code>styles.scss</code>, line 65
         </div>
           </div>
   </article>
diff --git a/styleguide/item-sass-colors.html b/styleguide/item-sass-colors.html
index bf95e69..4c0ce44 100644
--- a/styleguide/item-sass-colors.html
+++ b/styleguide/item-sass-colors.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-functions.html b/styleguide/item-sass-functions.html
index 6c25c8e..2e17677 100644
--- a/styleguide/item-sass-functions.html
+++ b/styleguide/item-sass-functions.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-init.html b/styleguide/item-sass-init.html
index f1de1f7..d3aa0f3 100644
--- a/styleguide/item-sass-init.html
+++ b/styleguide/item-sass-init.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-clearfix.html b/styleguide/item-sass-mixins-clearfix.html
index 86b94e7..c4f5819 100644
--- a/styleguide/item-sass-mixins-clearfix.html
+++ b/styleguide/item-sass-mixins-clearfix.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-image-url.html b/styleguide/item-sass-mixins-image-url.html
index 14e4b8e..194e20a 100644
--- a/styleguide/item-sass-mixins-image-url.html
+++ b/styleguide/item-sass-mixins-image-url.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-rtl.html b/styleguide/item-sass-mixins-rtl.html
index b659251..57d8efc 100644
--- a/styleguide/item-sass-mixins-rtl.html
+++ b/styleguide/item-sass-mixins-rtl.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-visually-hidden--focusable.html b/styleguide/item-sass-mixins-visually-hidden--focusable.html
index da28ee4..6665738 100644
--- a/styleguide/item-sass-mixins-visually-hidden--focusable.html
+++ b/styleguide/item-sass-mixins-visually-hidden--focusable.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-visually-hidden--off.html b/styleguide/item-sass-mixins-visually-hidden--off.html
index 3a047a5..aac9846 100644
--- a/styleguide/item-sass-mixins-visually-hidden--off.html
+++ b/styleguide/item-sass-mixins-visually-hidden--off.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins-visually-hidden.html b/styleguide/item-sass-mixins-visually-hidden.html
index 0f0b720..47544f4 100644
--- a/styleguide/item-sass-mixins-visually-hidden.html
+++ b/styleguide/item-sass-mixins-visually-hidden.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-mixins.html b/styleguide/item-sass-mixins.html
index f854d59..2e1c280 100644
--- a/styleguide/item-sass-mixins.html
+++ b/styleguide/item-sass-mixins.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-modules.html b/styleguide/item-sass-modules.html
index c105ea1..b753c05 100644
--- a/styleguide/item-sass-modules.html
+++ b/styleguide/item-sass-modules.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables-breakpoints.html b/styleguide/item-sass-variables-breakpoints.html
index 637bfbe..0f863f8 100644
--- a/styleguide/item-sass-variables-breakpoints.html
+++ b/styleguide/item-sass-variables-breakpoints.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables-misc.html b/styleguide/item-sass-variables-misc.html
index 86e7824..8b19928 100644
--- a/styleguide/item-sass-variables-misc.html
+++ b/styleguide/item-sass-variables-misc.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables-support-for.html b/styleguide/item-sass-variables-support-for.html
index ba6534e..5ae0eac 100644
--- a/styleguide/item-sass-variables-support-for.html
+++ b/styleguide/item-sass-variables-support-for.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables-typey.html b/styleguide/item-sass-variables-typey.html
index 90eb750..67822bf 100644
--- a/styleguide/item-sass-variables-typey.html
+++ b/styleguide/item-sass-variables-typey.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables-zen-grids.html b/styleguide/item-sass-variables-zen-grids.html
index 96b8c0a..9adc052 100644
--- a/styleguide/item-sass-variables-zen-grids.html
+++ b/styleguide/item-sass-variables-zen-grids.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass-variables.html b/styleguide/item-sass-variables.html
index 2254c32..05a110a 100644
--- a/styleguide/item-sass-variables.html
+++ b/styleguide/item-sass-variables.html
@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/item-sass.html b/styleguide/item-sass.html
index a6b8031..120affa 100644
--- a/styleguide/item-sass.html
+++ b/styleguide/item-sass.html
@@ -143,18 +143,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
diff --git a/styleguide/section-base.html b/styleguide/section-base.html
index 3fdaf82..071fd7d 100644
--- a/styleguide/section-base.html
+++ b/styleguide/section-base.html
@@ -209,18 +209,23 @@
                     </ul>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -690,7 +695,7 @@ erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 155
+          Source: <code>base/grouping/_grouping.scss</code>, line 146
         </div>
           </section>
           <section id="kssref-base-grouping-lists" class="kss-section kss-section--depth-3 ">
@@ -1317,7 +1322,7 @@ caption of the figure.</p>
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 115
+          Source: <code>base/grouping/_grouping.scss</code>, line 106
         </div>
           </section>
           <section id="kssref-base-grouping-hr" class="kss-section kss-section--depth-3 ">
@@ -1429,7 +1434,7 @@ ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 136
+          Source: <code>base/grouping/_grouping.scss</code>, line 127
         </div>
           </section>
           <section id="kssref-base-grouping-pre" class="kss-section kss-section--depth-3 ">
@@ -1532,7 +1537,7 @@ fragments of computer code, ASCII art, etc.</p>
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/grouping/_grouping.scss</code>, line 173
+          Source: <code>base/grouping/_grouping.scss</code>, line 164
         </div>
           </section>
           <section id="kssref-base-table" class="kss-section kss-section--depth-2 ">
@@ -3373,7 +3378,7 @@ used by web browsers to style hyperlinks.</p>
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/embedded/_embedded.scss</code>, line 35
+          Source: <code>base/embedded/_embedded.scss</code>, line 30
         </div>
           </section>
   </article>
diff --git a/styleguide/section-components.html b/styleguide/section-components.html
index 0358513..228ca91 100644
--- a/styleguide/section-components.html
+++ b/styleguide/section-components.html
@@ -39,90 +39,95 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
-                <span class="kss-nav__ref ">4.1</span
+                <span class="kss-nav__ref ">5.1</span
                 ><span class="kss-nav__name">Box</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
-                <span class="kss-nav__ref ">4.2</span
+                <span class="kss-nav__ref ">5.2</span
                 ><span class="kss-nav__name">Clearfix</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
-                <span class="kss-nav__ref ">4.3</span
+                <span class="kss-nav__ref ">5.3</span
                 ><span class="kss-nav__name">Divider</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
-                <span class="kss-nav__ref ">4.4</span
+                <span class="kss-nav__ref ">5.4</span
                 ><span class="kss-nav__name">Branding header</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
-                <span class="kss-nav__ref ">4.5</span
+                <span class="kss-nav__ref ">5.5</span
                 ><span class="kss-nav__name">Hidden</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
-                <span class="kss-nav__ref ">4.6</span
+                <span class="kss-nav__ref ">5.6</span
                 ><span class="kss-nav__name">Highlight mark</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
-                <span class="kss-nav__ref ">4.7</span
+                <span class="kss-nav__ref ">5.7</span
                 ><span class="kss-nav__name">Inline links</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
-                <span class="kss-nav__ref ">4.8</span
+                <span class="kss-nav__ref ">5.8</span
                 ><span class="kss-nav__name">Inline sibling</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
-                <span class="kss-nav__ref ">4.9</span
+                <span class="kss-nav__ref ">5.9</span
                 ><span class="kss-nav__name">Do not print</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
-                <span class="kss-nav__ref ">4.10</span
+                <span class="kss-nav__ref ">5.10</span
                 ><span class="kss-nav__name">Responsive video</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
-                <span class="kss-nav__ref ">4.11</span
+                <span class="kss-nav__ref ">5.11</span
                 ><span class="kss-nav__name">Visually hidden</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
-                <span class="kss-nav__ref ">4.12</span
+                <span class="kss-nav__ref ">5.12</span
                 ><span class="kss-nav__name">Watermark</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
-                <span class="kss-nav__ref ">4.13</span
+                <span class="kss-nav__ref ">5.13</span
                 ><span class="kss-nav__name">Wireframe</span>
               </a>
             </li>
@@ -130,7 +135,7 @@
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -144,7 +149,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-components">
             <span class="kss-title__ref">
-              4
+              5
               <span class="kss-title__permalink-hash">
                 components
               </span>
@@ -172,7 +177,7 @@ class names specified in the component.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-box">
             <span class="kss-title__ref">
-              4.1
+              5.1
               <span class="kss-title__permalink-hash">
                 components.box
               </span>
@@ -322,7 +327,7 @@ building a good component.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-clearfix">
             <span class="kss-title__ref">
-              4.2
+              5.2
               <span class="kss-title__permalink-hash">
                 components.clearfix
               </span>
@@ -423,7 +428,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-divider">
             <span class="kss-title__ref">
-              4.3
+              5.3
               <span class="kss-title__permalink-hash">
                 components.divider
               </span>
@@ -539,7 +544,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-header">
             <span class="kss-title__ref">
-              4.4
+              5.4
               <span class="kss-title__permalink-hash">
                 components.header
               </span>
@@ -677,7 +682,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-hidden">
             <span class="kss-title__ref">
-              4.5
+              5.5
               <span class="kss-title__permalink-hash">
                 components.hidden
               </span>
@@ -782,7 +787,7 @@ the <code>.js-hidden</code> class.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-highlight-mark">
             <span class="kss-title__ref">
-              4.6
+              5.6
               <span class="kss-title__permalink-hash">
                 components.highlight-mark
               </span>
@@ -880,7 +885,7 @@ element directly.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-inline-links">
             <span class="kss-title__ref">
-              4.7
+              5.7
               <span class="kss-title__permalink-hash">
                 components.inline-links
               </span>
@@ -982,7 +987,7 @@ element directly.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-inline-sibling">
             <span class="kss-title__ref">
-              4.8
+              5.8
               <span class="kss-title__permalink-hash">
                 components.inline-sibling
               </span>
@@ -1080,7 +1085,7 @@ element directly.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-print-none">
             <span class="kss-title__ref">
-              4.9
+              5.9
               <span class="kss-title__permalink-hash">
                 components.print-none
               </span>
@@ -1183,7 +1188,7 @@ performance.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-responsive-video">
             <span class="kss-title__ref">
-              4.10
+              5.10
               <span class="kss-title__permalink-hash">
                 components.responsive-video
               </span>
@@ -1301,7 +1306,7 @@ intrinsic aspect ratio is preserved at any screen width. The
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-visually-hidden">
             <span class="kss-title__ref">
-              4.11
+              5.11
               <span class="kss-title__permalink-hash">
                 components.visually-hidden
               </span>
@@ -1443,7 +1448,7 @@ intrinsic aspect ratio is preserved at any screen width. The
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-watermark">
             <span class="kss-title__ref">
-              4.12
+              5.12
               <span class="kss-title__permalink-hash">
                 components.watermark
               </span>
@@ -1549,7 +1554,7 @@ intrinsic aspect ratio is preserved at any screen width. The
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-components-wireframe">
             <span class="kss-title__ref">
-              4.13
+              5.13
               <span class="kss-title__permalink-hash">
                 components.wireframe
               </span>
diff --git a/styleguide/section-forms.html b/styleguide/section-forms.html
new file mode 100644
index 0000000..d403fce
--- /dev/null
+++ b/styleguide/section-forms.html
@@ -0,0 +1,1492 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Hugo Zen Style Guide</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../static/css/styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
+<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
+
+</head>
+<body id="kss-node" >
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-sass.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-base.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+                  <ul class="kss-nav__menu-child">
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
+                <span class="kss-nav__ref ">3.1</span
+                ><span class="kss-nav__name">Form defaults</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
+                ><span class="kss-nav__name">Fieldsets</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.2</span
+                ><span class="kss-nav__name">Inputs</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.3</span
+                ><span class="kss-nav__name">Checkboxes</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.4</span
+                ><span class="kss-nav__name">Radio buttons</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.5</span
+                ><span class="kss-nav__name">Labels</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.6</span
+                ><span class="kss-nav__name">Select list</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
+                <span class="kss-nav__ref kss-nav__ref-child">3.1.7</span
+                ><span class="kss-nav__name">Text areas</span>
+              </a>
+            </li>
+                      <li class="kss-nav__menu-item">
+              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
+                <span class="kss-nav__ref ">3.2</span
+                ><span class="kss-nav__name">Button</span>
+              </a>
+            </li>
+                    </ul>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-layouts.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-components.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-navigation.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+  
+          <div id="kssref-forms" class="kss-section kss-section--depth-1 ">
+      <div class="kss-style">
+                <h1 class="kss-title kss-title--level-1">
+          <a class="kss-title__permalink" href="#kssref-forms">
+            <span class="kss-title__ref">
+              3
+              <span class="kss-title__permalink-hash">
+                forms
+              </span>
+            </span>
+            forms
+          </a>
+        </h1>
+
+        
+        
+              </div>
+
+      
+          </div>
+          <section id="kssref-forms-base" class="kss-section kss-section--depth-2 ">
+      <div class="kss-style">
+                <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-forms-base">
+            <span class="kss-title__ref">
+              3.1
+              <span class="kss-title__permalink-hash">
+                forms.base
+              </span>
+            </span>
+            Form defaults
+          </a>
+        </h2>
+
+        
+                  <div class="kss-description">
+            <p>These are the default base styles applied to HTML form elements.</p>
+<p>Component classes can override these styles, but if no class applies a style
+to an HTML form element, these styles will be the ones displayed.</p>
+
+          </div>
+        
+              </div>
+
+      
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 3
+        </div>
+          </section>
+          <section id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
+            <span class="kss-title__ref">
+              3.1.1
+              <span class="kss-title__permalink-hash">
+                forms.base.fieldset
+              </span>
+            </span>
+            Fieldsets
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-fieldset" data-kss-fullscreen="kssref-forms-base-fieldset">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-fieldset.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-fieldset" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-fieldset" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;fieldset&gt;</code> element groups a set of form fields, optionally under a
+common name given by the <code>&lt;legend&gt;</code> element.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <fieldset class="">
+  <legend>A fieldset</legend>
+  <label for="fieldsetText">Text input</label>
+  <input type="text" id="fieldsetText" placeholder="Text input">
+</fieldset>
+
+<fieldset class="" disabled>
+  <legend>A disabled fieldset</legend>
+  <div>
+    <label for="fieldsetText2">Disabled text input</label>
+    <input type="text" id="fieldsetText2" placeholder="Disabled input">
+  </div>
+  <div>
+    <label for="fieldsetSelect">Disabled select menu</label>
+    <select id="fieldsetSelect">
+      <option>Disabled select</option>
+    </select>
+  </div>
+  <div>
+    <label><input type="checkbox"> Can't check this</label>
+  </div>
+</fieldset>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-fieldset.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;{{modifier_class}}&quot;&gt;
+  &lt;legend&gt;A fieldset&lt;/legend&gt;
+  &lt;label for=&quot;fieldsetText&quot;&gt;Text input&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;fieldsetText&quot; placeholder=&quot;Text input&quot;&gt;
+&lt;/fieldset&gt;
+
+&lt;fieldset class=&quot;{{modifier_class}}&quot; disabled&gt;
+  &lt;legend&gt;A disabled fieldset&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;label for=&quot;fieldsetText2&quot;&gt;Disabled text input&lt;/label&gt;
+    &lt;input type=&quot;text&quot; id=&quot;fieldsetText2&quot; placeholder=&quot;Disabled input&quot;&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for=&quot;fieldsetSelect&quot;&gt;Disabled select menu&lt;/label&gt;
+    &lt;select id=&quot;fieldsetSelect&quot;&gt;
+      &lt;option&gt;Disabled select&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Can&#039;t check this&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 158
+        </div>
+          </section>
+          <section id="kssref-forms-base-input" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input">
+            <span class="kss-title__ref">
+              3.1.2
+              <span class="kss-title__permalink-hash">
+                forms.base.input
+              </span>
+            </span>
+            Inputs
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-input" data-kss-fullscreen="kssref-forms-base-input">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-input.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-input" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;input&gt;</code> element is mostly used for text-based inputs that include the
+HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>password</code>, <code>date</code>,
+<code>time</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>file</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="inputText">Text</label>
+  <input type="text" class="" id="inputText" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputSearch">Search</label>
+  <input type="search" class="" id="inputSearch" placeholder="Search">
+</div>
+<div>
+  <label for="inputTel">Telephone</label>
+  <input type="text" class="" id="inputTel" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputURL">URL</label>
+  <input type="url" class="" id="inputURL" placeholder="Enter a URL">
+</div>
+<div>
+  <label for="inputEmail">Email address</label>
+  <input type="email" class="" id="inputEmail" placeholder="Enter email">
+</div>
+<div>
+  <label for="inputPassword">Password</label>
+  <input type="password" class="" id="inputPassword" placeholder="Password">
+</div>
+<div>
+  <label for="inputDate">Date</label>
+  <input type="date" class="" id="inputDate" placeholder="Enter a date">
+</div>
+<div>
+  <label for="inputTime">Time</label>
+  <input type="time" class="" id="inputTime" placeholder="Enter a time">
+</div>
+<div>
+  <label for="inputNumber">Number</label>
+  <input type="number" class="" id="inputNumber" placeholder="Enter a number">
+</div>
+<div>
+  <label for="inputRange">Range</label>
+  <input type="range" class="" id="inputRange" placeholder="Enter a range">
+</div>
+<div>
+  <label for="inputColor">Color</label>
+  <input type="color" class="" id="inputColor" placeholder="Enter a color">
+</div>
+<div>
+  <label for="inputFile">File input</label>
+  <input type="file" class="" id="inputFile">
+</div>
+
+<div>
+  <label for="inputText">Disabled text</label>
+  <input type="text" class="" disabled id="inputText" placeholder="Disabled text">
+</div>
+<div>
+  <label for="inputSearch">Disabled search</label>
+  <input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
+</div>
+<div>
+  <label for="inputTel">Disabled telephone</label>
+  <input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
+</div>
+<div>
+  <label for="inputURL">Disabled URL</label>
+  <input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
+</div>
+<div>
+  <label for="inputEmail">Disabled email address</label>
+  <input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
+</div>
+<div>
+  <label for="inputPassword">Disabled password</label>
+  <input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
+</div>
+<div>
+  <label for="inputDate">Disabled date</label>
+  <input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
+</div>
+<div>
+  <label for="inputTime">Disabled time</label>
+  <input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
+</div>
+<div>
+  <label for="inputNumber">Disabled number</label>
+  <input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
+</div>
+<div>
+  <label for="inputRange">Disabled range</label>
+  <input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
+</div>
+<div>
+  <label for="inputColor">Disabled color</label>
+  <input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
+</div>
+<div>
+  <label for="inputFile">Disabled file input</label>
+  <input type="file" class="" disabled id="inputFile">
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;inputText&quot;&gt;Text&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputText&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputSearch&quot;&gt;Search&lt;/label&gt;
+  &lt;input type=&quot;search&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputSearch&quot; placeholder=&quot;Search&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTel&quot;&gt;Telephone&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputTel&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputURL&quot;&gt;URL&lt;/label&gt;
+  &lt;input type=&quot;url&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputURL&quot; placeholder=&quot;Enter a URL&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputEmail&quot;&gt;Email address&lt;/label&gt;
+  &lt;input type=&quot;email&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputEmail&quot; placeholder=&quot;Enter email&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputPassword&quot;&gt;Password&lt;/label&gt;
+  &lt;input type=&quot;password&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputPassword&quot; placeholder=&quot;Password&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputDate&quot;&gt;Date&lt;/label&gt;
+  &lt;input type=&quot;date&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputDate&quot; placeholder=&quot;Enter a date&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTime&quot;&gt;Time&lt;/label&gt;
+  &lt;input type=&quot;time&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputTime&quot; placeholder=&quot;Enter a time&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputNumber&quot;&gt;Number&lt;/label&gt;
+  &lt;input type=&quot;number&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputNumber&quot; placeholder=&quot;Enter a number&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputRange&quot;&gt;Range&lt;/label&gt;
+  &lt;input type=&quot;range&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputRange&quot; placeholder=&quot;Enter a range&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputColor&quot;&gt;Color&lt;/label&gt;
+  &lt;input type=&quot;color&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputColor&quot; placeholder=&quot;Enter a color&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputFile&quot;&gt;File input&lt;/label&gt;
+  &lt;input type=&quot;file&quot; class=&quot;{{modifier_class}}&quot; id=&quot;inputFile&quot;&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;inputText&quot;&gt;Disabled text&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputText&quot; placeholder=&quot;Disabled text&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputSearch&quot;&gt;Disabled search&lt;/label&gt;
+  &lt;input type=&quot;search&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputSearch&quot; placeholder=&quot;Disabled search&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTel&quot;&gt;Disabled telephone&lt;/label&gt;
+  &lt;input type=&quot;text&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputTel&quot; placeholder=&quot;Disabled telephone&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputURL&quot;&gt;Disabled URL&lt;/label&gt;
+  &lt;input type=&quot;url&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputURL&quot; placeholder=&quot;Disabled URL&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputEmail&quot;&gt;Disabled email address&lt;/label&gt;
+  &lt;input type=&quot;email&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputEmail&quot; placeholder=&quot;Disabled email&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputPassword&quot;&gt;Disabled password&lt;/label&gt;
+  &lt;input type=&quot;password&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputPassword&quot; placeholder=&quot;Disabled password&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputDate&quot;&gt;Disabled date&lt;/label&gt;
+  &lt;input type=&quot;date&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputDate&quot; placeholder=&quot;Disabled date&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputTime&quot;&gt;Disabled time&lt;/label&gt;
+  &lt;input type=&quot;time&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputTime&quot; placeholder=&quot;Disabled time&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputNumber&quot;&gt;Disabled number&lt;/label&gt;
+  &lt;input type=&quot;number&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputNumber&quot; placeholder=&quot;Disabled number&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputRange&quot;&gt;Disabled range&lt;/label&gt;
+  &lt;input type=&quot;range&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputRange&quot; placeholder=&quot;Disabled range&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputColor&quot;&gt;Disabled color&lt;/label&gt;
+  &lt;input type=&quot;color&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputColor&quot; placeholder=&quot;Disabled color&quot;&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;inputFile&quot;&gt;Disabled file input&lt;/label&gt;
+  &lt;input type=&quot;file&quot; class=&quot;{{modifier_class}}&quot; disabled id=&quot;inputFile&quot;&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 92
+        </div>
+          </section>
+          <section id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
+            <span class="kss-title__ref">
+              3.1.3
+              <span class="kss-title__permalink-hash">
+                forms.base.input-checkbox
+              </span>
+            </span>
+            Checkboxes
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-input-checkbox" data-kss-fullscreen="kssref-forms-base-input-checkbox">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-input-checkbox.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-input-checkbox" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input-checkbox" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;checkbox&#39;</code> attribute set, the form
+field is displayed as a checkbox.</p>
+<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
+implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label><input type="checkbox" class=""> Check me out</label>
+</div>
+
+<div>
+  <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input-checkbox.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;{{modifier_class}}&quot;&gt; Check me out&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;{{modifier_class}}&quot; value=&quot;&quot; disabled&gt; Option two is disabled&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 126
+        </div>
+          </section>
+          <section id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
+            <span class="kss-title__ref">
+              3.1.4
+              <span class="kss-title__permalink-hash">
+                forms.base.input-radio
+              </span>
+            </span>
+            Radio buttons
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-input-radio" data-kss-fullscreen="kssref-forms-base-input-radio">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-input-radio.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-input-radio" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-input-radio" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;radio&#39;</code> attribute set, the form field
+is displayed as a radio button.</p>
+<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
+implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
+</div>
+
+<div>
+  <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
+</div>
+
+<div>
+  <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-input-radio.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option1&quot; name=&quot;example-radio&quot; checked&gt; Option one&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option2&quot; name=&quot;example-radio&quot;&gt; Option two&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;{{modifier_class}}&quot; value=&quot;option3&quot; name=&quot;example-radio&quot; disabled&gt; Option three is disabled&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 138
+        </div>
+          </section>
+          <section id="kssref-forms-base-label" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-label">
+            <span class="kss-title__ref">
+              3.1.5
+              <span class="kss-title__permalink-hash">
+                forms.base.label
+              </span>
+            </span>
+            Labels
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-label" data-kss-fullscreen="kssref-forms-base-label">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-label.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-label" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-label" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;label&gt;</code> element represents a caption of a form field. The label can be
+associated with a specific form control by using the <code>for</code> attribute or by
+putting the form control inside the label element itself.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label class="" for="lableInputText">A label for a text input</label>
+  <input type="text" id="lableInputText" placeholder="Enter some text">
+</div>
+
+<div>
+  <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-label.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label class=&quot;{{modifier_class}}&quot; for=&quot;lableInputText&quot;&gt;A label for a text input&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;lableInputText&quot; placeholder=&quot;Enter some text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label class=&quot;{{modifier_class}}&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt; A label wrapped around a checkbox&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 188
+        </div>
+          </section>
+          <section id="kssref-forms-base-select" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-select">
+            <span class="kss-title__ref">
+              3.1.6
+              <span class="kss-title__permalink-hash">
+                forms.base.select
+              </span>
+            </span>
+            Select list
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-select" data-kss-fullscreen="kssref-forms-base-select">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-select.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-select" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-select" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;select&gt;</code> element represents a form field for selecting amongst a set of
+options.</p>
+<p>Known limitation: by default, Chrome and Safari on OS X allow very limited
+styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is set.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="selectDropdown">A standard drop-down</label>
+  <select class="" id="selectDropdown">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectMultiItem">A multi-item select field</label>
+  <select class="" id="selectMultiItem" multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectDisabled">A disabled drop-down</label>
+  <select class="" id="selectDisabled" disabled>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-select.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;selectDropdown&quot;&gt;A standard drop-down&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectDropdown&quot;&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;selectMultiItem&quot;&gt;A multi-item select field&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectMultiItem&quot; multiple&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;label for=&quot;selectDisabled&quot;&gt;A disabled drop-down&lt;/label&gt;
+  &lt;select class=&quot;{{modifier_class}}&quot; id=&quot;selectDisabled&quot; disabled&gt;
+    &lt;option&gt;Option 1&lt;/option&gt;
+    &lt;option&gt;Option 2&lt;/option&gt;
+    &lt;option&gt;Option 3&lt;/option&gt;
+    &lt;optgroup label=&quot;More options&quot;&gt;
+      &lt;option&gt;Option 4&lt;/option&gt;
+      &lt;option&gt;Option 5&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 204
+        </div>
+          </section>
+          <section id="kssref-forms-base-textarea" class="kss-section kss-section--depth-3 ">
+      <div class="kss-style">
+                <h3 class="kss-title kss-title--level-3">
+          <a class="kss-title__permalink" href="#kssref-forms-base-textarea">
+            <span class="kss-title__ref">
+              3.1.7
+              <span class="kss-title__permalink-hash">
+                forms.base.textarea
+              </span>
+            </span>
+            Text areas
+          </a>
+        </h3>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-base-textarea" data-kss-fullscreen="kssref-forms-base-textarea">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-base-textarea.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-base-textarea" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-base-textarea" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>The <code>&lt;textarea&gt;</code> element represents a multi-line plain text form field.</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Example          </div>
+
+          
+          <div class="kss-modifier__example">
+            <div>
+  <label for="exampleTextarea">Text area</label>
+  <textarea class="" rows="3" id="exampleTextarea"></textarea>
+</div>
+<div>
+  <label for="exampleTextarea">Disabled text area</label>
+  <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
+</div>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>base/forms/forms-textarea.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;label for=&quot;exampleTextarea&quot;&gt;Text area&lt;/label&gt;
+  &lt;textarea class=&quot;{{modifier_class}}&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot;&gt;&lt;/textarea&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for=&quot;exampleTextarea&quot;&gt;Disabled text area&lt;/label&gt;
+  &lt;textarea class=&quot;{{modifier_class}}&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot; disabled&gt;&lt;/textarea&gt;
+&lt;/div&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>base/forms/_forms.scss</code>, line 225
+        </div>
+          </section>
+          <section id="kssref-forms-button" class="kss-section kss-section--depth-2 ">
+      <div class="kss-style">
+                <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-forms-button">
+            <span class="kss-title__ref">
+              3.2
+              <span class="kss-title__permalink-hash">
+                forms.button
+              </span>
+            </span>
+            Button
+          </a>
+        </h2>
+
+                  <p class="kss-toolbar">
+                          <a href="#kssref-forms-button" data-kss-fullscreen="kssref-forms-button">
+                <span class="kss-toolbar__tooltip">Toggle full screen</span>
+                <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+                <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
+                </svg>
+              </a>
+              <a href="item-forms-button.html" target="_blank">
+                <span class="kss-toolbar__tooltip">Open in new window</span>
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                  <rect x="0" y="20" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
+                  <rect x="24" y="0" width="40" height="44" fill="#fff"/>
+                  <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
+                  <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
+                </svg>
+              </a>
+                        <a href="#kssref-forms-button" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-forms-button" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+        
+                  <div class="kss-description">
+            <p>In addition to the default styling of <code>&lt;button&gt;</code> and
+<code>&lt;input type=&quot;submit|image|reset|button&quot;&gt;</code> elements, the <code>.button</code> class and
+its variants can apply buttons styles to various elements (like an <code>&lt;a&gt;</code>
+link).</p>
+
+          </div>
+        
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples          </div>
+
+                      <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+          
+          <div class="kss-modifier__example">
+            <p>
+  <button class="button " type="button">Standard button</button>
+  <button class="button " type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button " type="submit">Submit button</button>
+  <button class="button " type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button " type="reset">Reset button</button>
+  <button class="button " type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button " type="button" value="Input button">
+  <input class="button " type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button " type="submit" value="Input submit button">
+  <input class="button " type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button " type="reset" value="Input reset button">
+  <input class="button " type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button " href="#">Link button</a>
+  <a class="button " disabled href="#">Disabled link button</a>
+</p>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                      <div class="kss-modifier__name kss-style">
+              :hover
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Hover styling.
+            </div>
+            <div class="kss-modifier__example">
+              <p>
+  <button class="button pseudo-class-hover" type="button">Standard button</button>
+  <button class="button pseudo-class-hover" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button pseudo-class-hover" type="submit">Submit button</button>
+  <button class="button pseudo-class-hover" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button pseudo-class-hover" type="reset">Reset button</button>
+  <button class="button pseudo-class-hover" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="button" value="Input button">
+  <input class="button pseudo-class-hover" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="submit" value="Input submit button">
+  <input class="button pseudo-class-hover" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-hover" type="reset" value="Input reset button">
+  <input class="button pseudo-class-hover" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button pseudo-class-hover" href="#">Link button</a>
+  <a class="button pseudo-class-hover" disabled href="#">Disabled link button</a>
+</p>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                      <div class="kss-modifier__name kss-style">
+              :active
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Depressed button styling.
+            </div>
+            <div class="kss-modifier__example">
+              <p>
+  <button class="button pseudo-class-active" type="button">Standard button</button>
+  <button class="button pseudo-class-active" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button pseudo-class-active" type="submit">Submit button</button>
+  <button class="button pseudo-class-active" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button pseudo-class-active" type="reset">Reset button</button>
+  <button class="button pseudo-class-active" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="button" value="Input button">
+  <input class="button pseudo-class-active" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="submit" value="Input submit button">
+  <input class="button pseudo-class-active" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button pseudo-class-active" type="reset" value="Input reset button">
+  <input class="button pseudo-class-active" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button pseudo-class-active" href="#">Link button</a>
+  <a class="button pseudo-class-active" disabled href="#">Disabled link button</a>
+</p>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>components/button/button.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot;&gt;Standard button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; disabled&gt;Disabled button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot;&gt;Submit button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; disabled&gt;Disabled submit button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot;&gt;Reset button&lt;/button&gt;
+  &lt;button class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; disabled&gt;Disabled reset button&lt;/button&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; value=&quot;Input button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;button&quot; value=&quot;Disabled input button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; value=&quot;Input submit button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;submit&quot; value=&quot;Disabled input submit button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; value=&quot;Input reset button&quot;&gt;
+  &lt;input class=&quot;button {{modifier_class}}&quot; type=&quot;reset&quot; value=&quot;Disabled input reset button&quot; disabled&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;a class=&quot;button {{modifier_class}}&quot; href=&quot;#&quot;&gt;Link button&lt;/a&gt;
+  &lt;a class=&quot;button {{modifier_class}}&quot; disabled href=&quot;#&quot;&gt;Disabled link button&lt;/a&gt;
+&lt;/p&gt;
+</code></pre>
+          </details>
+              
+              <div class="kss-source kss-style">
+          Source: <code>components/button/_button.scss</code>, line 1
+        </div>
+          </section>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/styleguide/section-layouts.html b/styleguide/section-layouts.html
index 1f15f38..ab4faec 100644
--- a/styleguide/section-layouts.html
+++ b/styleguide/section-layouts.html
@@ -39,25 +39,30 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-center">
-                <span class="kss-nav__ref ">3.1</span
+                <span class="kss-nav__ref ">4.1</span
                 ><span class="kss-nav__name">Layout Center</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-3col">
-                <span class="kss-nav__ref ">3.2</span
+                <span class="kss-nav__ref ">4.2</span
                 ><span class="kss-nav__name">Responsive 3-column grid</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-swap">
-                <span class="kss-nav__ref ">3.3</span
+                <span class="kss-nav__ref ">4.3</span
                 ><span class="kss-nav__name">Layout swap</span>
               </a>
             </li>
@@ -65,12 +70,12 @@
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -84,7 +89,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-layouts">
             <span class="kss-title__ref">
-              3
+              4
               <span class="kss-title__permalink-hash">
                 layouts
               </span>
@@ -113,7 +118,7 @@ and are not documented.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-center">
             <span class="kss-title__ref">
-              3.1
+              4.1
               <span class="kss-title__permalink-hash">
                 layouts.layout-center
               </span>
@@ -235,7 +240,7 @@ instead.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-3col">
             <span class="kss-title__ref">
-              3.2
+              4.2
               <span class="kss-title__permalink-hash">
                 layouts.layout-3col
               </span>
@@ -489,7 +494,7 @@ to the div to ensure its nested grid items align with the parent grid.</li>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-layouts-layout-swap">
             <span class="kss-title__ref">
-              3.3
+              4.3
               <span class="kss-title__permalink-hash">
                 layouts.layout-swap
               </span>
diff --git a/styleguide/section-navigation.html b/styleguide/section-navigation.html
index e9324e5..9730c2d 100644
--- a/styleguide/section-navigation.html
+++ b/styleguide/section-navigation.html
@@ -39,53 +39,58 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
                   <ul class="kss-nav__menu-child">
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-breadcrumb">
-                <span class="kss-nav__ref ">5.1</span
+                <span class="kss-nav__ref ">6.1</span
                 ><span class="kss-nav__name">Breadcrumb navigation</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-more-link">
-                <span class="kss-nav__ref ">5.2</span
+                <span class="kss-nav__ref ">6.2</span
                 ><span class="kss-nav__name">&quot;More&quot; link</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-nav-menu">
-                <span class="kss-nav__ref ">5.3</span
+                <span class="kss-nav__ref ">6.3</span
                 ><span class="kss-nav__name">Nav menu</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-navbar">
-                <span class="kss-nav__ref ">5.4</span
+                <span class="kss-nav__ref ">6.4</span
                 ><span class="kss-nav__name">Navbar</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-pager">
-                <span class="kss-nav__ref ">5.5</span
+                <span class="kss-nav__ref ">6.5</span
                 ><span class="kss-nav__name">Pager</span>
               </a>
             </li>
                       <li class="kss-nav__menu-item">
               <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-skip-link">
-                <span class="kss-nav__ref ">5.6</span
+                <span class="kss-nav__ref ">6.6</span
                 ><span class="kss-nav__name">Skip link</span>
               </a>
             </li>
@@ -102,7 +107,7 @@
                 <h1 class="kss-title kss-title--level-1">
           <a class="kss-title__permalink" href="#kssref-navigation">
             <span class="kss-title__ref">
-              5
+              6
               <span class="kss-title__permalink-hash">
                 navigation
               </span>
@@ -122,7 +127,7 @@ page navigation.</p>
 
       
               <div class="kss-source kss-style">
-          Source: <code>styles.scss</code>, line 64
+          Source: <code>styles.scss</code>, line 65
         </div>
           </div>
           <section id="kssref-navigation-breadcrumb" class="kss-section kss-section--depth-2 ">
@@ -130,7 +135,7 @@ page navigation.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-breadcrumb">
             <span class="kss-title__ref">
-              5.1
+              6.1
               <span class="kss-title__permalink-hash">
                 navigation.breadcrumb
               </span>
@@ -244,7 +249,7 @@ page navigation.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-more-link">
             <span class="kss-title__ref">
-              5.2
+              6.2
               <span class="kss-title__permalink-hash">
                 navigation.more-link
               </span>
@@ -352,7 +357,7 @@ page navigation.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-nav-menu">
             <span class="kss-title__ref">
-              5.3
+              6.3
               <span class="kss-title__permalink-hash">
                 navigation.nav-menu
               </span>
@@ -503,7 +508,7 @@ side or below the main content.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-navbar">
             <span class="kss-title__ref">
-              5.4
+              6.4
               <span class="kss-title__permalink-hash">
                 navigation.navbar
               </span>
@@ -615,7 +620,7 @@ side or below the main content.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-pager">
             <span class="kss-title__ref">
-              5.5
+              6.5
               <span class="kss-title__permalink-hash">
                 navigation.pager
               </span>
@@ -764,7 +769,7 @@ is available.</p>
                 <h2 class="kss-title kss-title--level-2">
           <a class="kss-title__permalink" href="#kssref-navigation-skip-link">
             <span class="kss-title__ref">
-              5.6
+              6.6
               <span class="kss-title__permalink-hash">
                 navigation.skip-link
               </span>
diff --git a/styleguide/section-sass.html b/styleguide/section-sass.html
index fcc8643..baa5737 100644
--- a/styleguide/section-sass.html
+++ b/styleguide/section-sass.html
@@ -143,18 +143,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>