docs fixes

_config.yml

@@ -68,6 +68,7 @@ defaults:
       type: "docs"
     values:
       layout: docs
+      toc: true
   - scope:
       type: "components"
     values:

pages/_docs/alerts.md

@@ -3,10 +3,9 @@ title: Alerts
 menu: docs.alerts
 description: Bootstrap provides an easy way to create predefined alert messages.
 bootstrap-link: components/alerts/
-done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% for variant in site.variants %}
@@ -19,7 +18,7 @@ done: true
 {% include example.html code=code %}
 
 
-### Alert Links
+## Alert Links
 
 Add the `alert-link` class to any links inside the alert box to create "matching colored links":
 
@@ -34,7 +33,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% include example.html code=code %}
 
 
-### Dismissible Alerts
+## Dismissible Alerts
 
 {% capture code %}
 {% for variant in site.variants %}
@@ -46,7 +45,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endcapture %}
 {% include example.html code=code %}
 
-### Alerts with icons
+## Alerts with icons
 
 {% capture code %}
 {% for variant in site.variants %}
@@ -58,7 +57,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endcapture %}
 {% include example.html code=code %}
 
-### Alert with avatar
+## Alert with avatar
 
 {% capture code %}
 {% for variant in site.variants %}
@@ -70,7 +69,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endcapture %}
 {% include example.html code=code %}
 
-### Alert with buttons
+## Alert with buttons
 
 {% capture code %}
 {% capture variant-text %}

pages/_docs/autosize.md

@@ -5,7 +5,7 @@ description: A small, stand-alone script to automatically adjust textarea height
 done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 <label class="form-label">Autosize example</label>

pages/_docs/avatars.md

@@ -2,19 +2,18 @@
 title: Avatars
 menu: docs.avatars
 description: Create and group avatars of various shapes and sizes with one component.
-done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include ui/avatar.html person-id=1 %}
 {% include ui/avatar.html person-id=2 %}
 {% include ui/avatar.html person-id=3 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar image
+## Avatar image
 
 Set an image as the background.
 
@@ -23,9 +22,9 @@ Set an image as the background.
 {% include ui/avatar.html person-id=3 %}
 {% include ui/avatar.html person-id=4 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Initials
+## Initials
 
 You can easily use initials instead of images.
 
@@ -36,9 +35,9 @@ You can easily use initials instead of images.
 {% include ui/avatar.html placeholder="GH" %}
 {% include ui/avatar.html placeholder="IJ" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar icons
+## Avatar icons
 
 You can also use icons in avatars.
 
@@ -47,9 +46,9 @@ You can also use icons in avatars.
 {% include ui/avatar.html icon="plus" %}
 {% include ui/avatar.html icon="user-plus" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar initials color
+## Avatar initials color
 
 Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
@@ -60,9 +59,9 @@ Customize the color of the avatars' background. You can click [here]({% docs_url
 {% include ui/avatar.html placeholder="GH" color="blue" %}
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar size
+## Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
 
@@ -73,9 +72,9 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
 {% include ui/avatar.html person-id=7 %}
 {% include ui/avatar.html person-id=6 size="sm" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar status
+## Avatar status
 
 Add an online or offline status indicator to show user's availability.
 
@@ -87,9 +86,9 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=15 status="info" %}
 {% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatar shape
+## Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes.
 
@@ -100,18 +99,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=20 shape="rounded-0" %}
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Avatars list
+## Avatars list
 
 You can easily create a list of avatars.
 
 {% capture code %}
 {% include ui/avatar-list.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Stacked list
+## Stacked list
 
 Make the list stack when it reaches a certain length.
 
@@ -120,7 +119,7 @@ Make the list stack when it reaches a certain length.
   {% for person in site.data.people limit: 5 offset: 30 %}
   {% include ui/avatar.html person=person element="a" %}
   {% endfor %}
-  <span class="avatar" element="a">+8</span>
+  <span class="avatar">+8</span>
 </div>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}

pages/_docs/badges.md

@@ -3,19 +3,18 @@ title: Badges
 menu: docs.badges
 description: A small count and labeling component.
 bootstrap-link: components/badge/
-done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Pill badges
+## Pill badges
 
 To make a pill bagde (with rounded corners) add `.bagde-pill` class.
 
@@ -24,10 +23,10 @@ To make a pill bagde (with rounded corners) add `.bagde-pill` class.
 <span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
 
-### Soft badges
+## Soft badges
 
 Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
@@ -36,10 +35,10 @@ Creates a soft variant of a corresponding contextual badge variation. You can cl
 <span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
 {% endfor %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
 
-### Links
+## Links
 
 Make a badge work as a link by putting it into an `<a>` element.
 
@@ -48,10 +47,10 @@ Make a badge work as a link by putting it into an `<a>` element.
 <a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
 {% endfor %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
 
-### Empty badges
+## Empty badges
 
 If you don't want your badge to contain any text you can do it by leaving the html element empty.
 
@@ -60,4 +59,4 @@ If you don't want your badge to contain any text you can do it by leaving the ht
 <a href="#" class="badge bg-{{ color[0] }}"></a>
 {% endfor %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}

pages/_docs/breadcrumb.md

@@ -6,38 +6,37 @@ bootstrap-link: components/breadcrumb/
 ---
 
 
-
-### Default markup
+## Default markup
  
 The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links.
 
 {% capture code %}
 {% include ui/breadcrumb.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Breadcrumb variations
+## Breadcrumb variations
 
 You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
 
 {% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-dots" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
 {% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-arrows" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
 {% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-bullets" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}
 
-### Alternate version
+## Alternate version
 
 {% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-alternate" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code centered=true %}

pages/_docs/buttons.md

@@ -4,10 +4,9 @@ icon: fe fe-plus-square
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
 bootstrap-link: components/buttons/
 done: true
-toc: true
 ---
 
-### Button tag
+## Button tag
 
 The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
 
@@ -21,7 +20,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
 
-### Button variations
+## Button variations
 
 Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
 
@@ -34,7 +33,7 @@ Use any of the available button classes to quickly create a styled button . We p
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Disabled buttons
+## Disabled buttons
 
 Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
 
@@ -47,7 +46,7 @@ Make buttons look inactive by adding the disabled boolean attribute to any `.btn
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Color variations
+## Color variations
 
 The classic button, in different colors.
 
@@ -58,7 +57,7 @@ The classic button, in different colors.
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Ghost Buttons
+## Ghost Buttons
 
 Use `.btn-ghost-*` class for ghost buttons.
 
@@ -69,7 +68,7 @@ Use `.btn-ghost-*` class for ghost buttons.
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Square buttons
+## Square buttons
 
 Add `.btn-square` to button to remove border-radius.
 
@@ -82,7 +81,7 @@ Add `.btn-square` to button to remove border-radius.
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Pill buttons
+## Pill buttons
 
 Add `.btn-pill` class to any button to make them more rounded.
 
@@ -95,7 +94,7 @@ Add `.btn-pill` class to any button to make them more rounded.
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Outline buttons
+## Outline buttons
 
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
@@ -108,7 +107,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Button size
+## Button size
 
 Add `.btn-lg` or `.btn-sm` for additional sizes.
 
@@ -132,7 +131,7 @@ Create block level buttons—those that span the full width of a parent—by add
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Button with icon
+## Button with icon
 
 Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
 
@@ -166,7 +165,7 @@ Comment
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Social buttons
+## Social buttons
 
 A button can be formatted to link to a social website
 
@@ -191,7 +190,7 @@ You can use only icons.
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Icon buttons
+## Icon buttons
 
 Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
 
@@ -207,7 +206,7 @@ Icon only button. Add `.btn-icon` class to remove unnecessary padding from butto
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
 
-### Button dropdown
+## Button dropdown
 
 Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
 
@@ -235,7 +234,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-### Loading button
+## Loading button
 
 Add `.btn-loading` to use a loading state on a button. The width of the button depends on the length of the text inside.
 
@@ -253,7 +252,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
 {% endcapture %}
 {% include example.html code=code centered=true %}
 
-### List of buttons
+## List of buttons
 
 You can now create a list of buttons with the `.btn-list` container.
 
@@ -320,7 +319,7 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Button with avatar
+## Button with avatar
 
 {% capture code %}
 <a href="#" class="btn btn-secondary">

pages/_docs/cards.md

@@ -4,7 +4,6 @@ menu: docs.cards
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
 bootstrap-link: components/card/
 done: true
-toc: true
 ---
 
 The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
@@ -18,7 +17,7 @@ To create a new card you have to use the `.card` and `.card-body` classes. You c
 {% endcapture %}
 {% include example.html code=code columns=1 %}
 
-### Card padding
+## Card padding
 
 You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes. 
 

pages/_docs/carousel.md

@@ -5,7 +5,9 @@ description: The Carousel is a slideshow for cycling through elements.
 bootstrap-link: components/carousel/
 ---
 
+## Default markup
+
 {% capture code %}
 {% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code max-width="20rem" centered=true %}

pages/_docs/charts.md

@@ -3,7 +3,7 @@ title: Charts
 menu: docs.charts
 ---
 
-### c3.js charts 
+## Default markup
 
 {% for chart in site.data.charts %}
 {% if chart[1].display %}

pages/_docs/countup.md

@@ -7,7 +7,7 @@ Countups with many options that can be found [here](https://inorganik.github.io/
 
 To make countup add `data-countup` to any html text tag.
 
-### Default countup
+## Default countup
 
 Set number to count up.
 
@@ -16,7 +16,7 @@ Set number to count up.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Duration
+## Duration
 
 Set the `duration` of the countup. (2s is set by default)
 
@@ -27,7 +27,7 @@ Set the `duration` of the countup. (2s is set by default)
 {% endcapture %}
 {% include example.html code=code %}
 
-### Starting value
+## Starting value
 
 Set the start value of countup using `startVal`.
 If you set it bigger than the `count`, countup will run reverse.
@@ -38,7 +38,7 @@ If you set it bigger than the `count`, countup will run reverse.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Decimal places
+## Decimal places
 
 Set how many decimal places to show using `decimalPlaces`.
 
@@ -50,7 +50,7 @@ Set how many decimal places to show using `decimalPlaces`.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Easing
+## Easing
 
 Disable easing using `"useEasing": false`. (`true` by default)
 
@@ -60,7 +60,7 @@ Disable easing using `"useEasing": false`. (`true` by default)
 {% endcapture %}
 {% include example.html code=code %}
 
-### Use grouping
+## Use grouping
 
 Disable grouping using `"useGrouping": false`. (`true` by default)
 
@@ -70,7 +70,7 @@ Disable grouping using `"useGrouping": false`. (`true` by default)
 {% endcapture %}
 {% include example.html code=code %}
 
-### Separator
+## Separator
 
 Set seperator that seperates groups using `separator`. (`,` by default)
 
@@ -82,7 +82,7 @@ Set seperator that seperates groups using `separator`. (`,` by default)
 {% endcapture %}
 {% include example.html code=code %}
 
-### Decimal separator
+## Decimal separator
 
 Set decimal separator using `decimal`. (`.` by default)
 
@@ -94,7 +94,7 @@ Set decimal separator using `decimal`. (`.` by default)
 {% endcapture %}
 {% include example.html code=code %}
 
-### Prefix
+## Prefix
 
 Set countup prefix using `prefix`.
 
@@ -105,7 +105,7 @@ Set countup prefix using `prefix`.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Suffix
+## Suffix
 
 Set countup suffix using `suffix`.
 

pages/_docs/cursors.md

@@ -3,7 +3,7 @@ title: Cursors
 menu: docs.cursors
 ---
 
-### Cursor utilities 
+## Cursor utilities 
 
 - `.cursor-auto`- cursor style depends on what's inside element
 - `.cursor-pointer` - pointing cursor

pages/_docs/divider.md

@@ -4,7 +4,21 @@ description: A divider visually segments content into groups
 bootstrap-link: components/dropdowns/#dividers
 done: true
 ---
-### Default markup
+
+## Default markup
+
+{% capture code %}
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% include ui/hr.html text="See also" %}
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% endcapture %}
+{% include example.html code=code %}
+
+## Text position
 
 {% capture code %}
 <p>
@@ -25,7 +39,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Divider color
+## Divider color
 
 Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
@@ -37,5 +51,9 @@ Customize the color of the divider. You can click [here]({% docs_url colors %})
 <p>
    Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
+{% include ui/hr.html text="Red divider" color="red" %}
+<p>
+   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
 {% endcapture %}
 {% include example.html code=code %}

pages/_docs/dropdowns.md

@@ -2,7 +2,6 @@
 title: Dropdowns
 description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
 bootstrap-link: components/dropdowns
-toc: true
 ---
 
 ## Default dropdown

pages/_docs/empty.md

@@ -3,14 +3,14 @@ title: Empty states
 description: Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include ui/empty.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Empty state with illustration
+## Empty state with illustration
 
 {% capture code %}
 {% include ui/empty.html illustration=true %}

pages/_docs/flags.md

@@ -5,7 +5,7 @@ plugin: flags
 done: true
 ---
 
-### Flag
+## Flag
 
 {% capture code %}
 {% include ui/flag.html flag="tg" class="mr-1" %}
@@ -14,7 +14,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Flag sizes
+## Flag sizes
 
 Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
 
@@ -26,7 +26,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
 {% endcapture %}
 {% include example.html code=code %}
 
-### Types
+## Types
 
 To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
 

pages/_docs/form-elements.md

@@ -3,142 +3,113 @@ title: Form Elements
 bootstrap-link: components/forms/
 ---
 
-### Classic Input
+## Classic Inputs
 
 {% capture code %}
-<div class="mb-2">
-  <label class="form-label">Static</label>
-<div class="form-control-plaintext">Username</div>
-</div>
-
-<div class="mb-2">
-  <label class="form-label">Text</label>
-  <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
-</div>
-
-<div class="mb-2">
-   <label class="form-label">Disabled</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
-          value="Well, she turned me into a newt." disabled>
-</div>
-<div class="mb-2">
-   <label class="form-label">Readonly</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
-          value="Well, how'd you become king, then?" readonly>
-</div>
+{% include parts/form/input.html type="text" hint="Here's some more info." %}
+{% include parts/form/input.html type="password" hint="Here's some more info." %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Password and validation
-{% capture code %}
-<div class="mb-2">
-   <label class="form-label">Password</label>
-   <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
-</div>
+## Textarea and select
 
-<div class="mb-2">
-   <label class="form-label">Valid State</label>
-   <input type="text" class="form-control is-valid" name="example-text-input-valid"
-          placeholder="Valid State..">
-
-   <input type="text" class="form-control mt-3 state-valid" value="Valid state">
-</div>
-
-<div class="mb-2">
-   <label class="form-label">Invalid State</label>
-   <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
-          placeholder="Invalid State..">
-   <div class="invalid-feedback">Invalid feedback</div>
+{% capture code %}
+{% include parts/form/input.html type="textarea" %}
 
-   <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
-</div>
+{% include parts/form/select.html %}
+{% include parts/form/select.html label="Select multiple" multiple=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input size
+## Validation states
 
-{% include parts/form/input-sizes.html %}
+{% capture code %}
+{% include parts/form/validation-states.html %}
+{% include example.html code=code %}
 
+### Subtle validation states
 
-### Select
 {% capture code %}
-{% include parts/form/select.html options="Germany,USA,Poland" %}
-{% endcapture %}
+{% include parts/form/validation-states.html lite=true %}
 {% include example.html code=code %}
 
-### Textarea
+## Input size
+
 {% capture code %}
-<div class="mb-2">
-   <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
-   <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
-</div>
+{% include parts/form/input-sizes.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Image check
+## Image check
+
 {% capture code %}
 {% include parts/form/input-image.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code max-width="25rem" %}
+
+## Input color
 
-### Input color
 {% capture code %}
 {% include parts/form/input-color.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input color picker
+## Input color picker
+
 {% capture code %}
 {% include parts/form/input-colorpicker.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Datalists
+## Datalists
+
 {% capture code %}
 {% include parts/form/input-datalist.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Custom selectboxes
+## Custom selectboxes
+
 {% capture code %}
 {% include parts/form/input-selectgroups.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Toggle switches
+## Toggle switches
+
 {% capture code %}
 {% include parts/form/input-toggle.html %}
 {% include parts/form/input-toggle-single.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Radios
+## Radios
 {% capture code %}
 {% include parts/form/input-radios.html %}
 {% include parts/form/input-radios-inline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Checkboxes
+## Checkboxes
 {% capture code %}
 {% include parts/form/input-checkboxes.html %}
 {% include parts/form/input-checkboxes-inline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Range input
+## Range input
 {% capture code %}
 {% include parts/form/input-range.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Sample form
+## Sample form
 {% capture code %}
 {% include parts/form/fieldset.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input group
+## Input group
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Input group</label>
@@ -175,19 +146,19 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input with icon
+## Input with icon
 {% capture code %}
 {% include parts/form/input-icon.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Separated inputs
+## Separated inputs
 {% capture code %}
 {% include parts/form/input-icon-separated.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Custom Input examples
+## Custom Input examples
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Username</label>
@@ -211,7 +182,7 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Date component
+## Date component
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Date of birth</label>
@@ -252,7 +223,7 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input with button
+## Input with button
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Button input</label>

pages/_docs/form-helpers.md

@@ -2,7 +2,7 @@
 title: Form helpers
 ---
 
-### Input help
+## Input help
 
 {% capture code %}
 <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>

pages/_docs/index.md

@@ -15,7 +15,7 @@ Tabler is a perfect solution if you want to create an interface which is not onl
 
 To start using Tabler, first you need to set up the environment.
 
-### Set up the environment
+## Set up the environment
 
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
@@ -31,7 +31,7 @@ To use our build system and run our documentation locally, you'll need a copy of
   
 Once you've completed the setup, you'll be able to run the various commands provided from the command line.
 
-### Build Tabler locally
+## Build Tabler locally
 
 1. From the root `/tabler` directory, run `npm run start` in the command line.
 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
@@ -41,6 +41,6 @@ Once you've completed the setup, you'll be able to run the various commands prov
 Run `npm run build` for rerforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
-### Bugs and feature requests
+## Bugs and feature requests
 
 Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

pages/_docs/input-mask.md

@@ -2,6 +2,8 @@
 title: Input mask
 ---
 
+## Default markup
+
 {% capture code %}
 <label class="form-label">Telephone mask</label>
 {% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}

pages/_docs/layout.md

----
-title: Page Layouts
-done: true
----
-
-Tabler includes a number of utility pages to help speed up development of your project management web application
-
-{% include layout/layouts-list.html wide=true class="mt-6" %}

pages/_docs/payments.md

@@ -5,7 +5,7 @@ plugin: payments
 done: true
 ---
 
-### Payment
+## Payment
 
 {% capture code %}
 {% include ui/payment.html class="mr-3" payment="shopify"%}
@@ -14,7 +14,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Payment sizes
+## Payment sizes
 
 Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
 
@@ -26,7 +26,7 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
 {% endcapture %}
 {% include example.html code=code %}
 
-### Types
+## Types
 
 <table class="table-vcenter">
 {% for payment in site.data.payments %}

pages/_docs/progress.md

@@ -5,7 +5,7 @@ bootstrap-link: components/progress
 done: true
 ---
 
-### Default markup
+## Default markup
 
 To create a default progress bar, add a `.progress` class to a `<div>` element:
 
@@ -14,7 +14,7 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
 {% endcapture %}
 {% include example.html code=code %}
 
-### Progress size
+## Progress size
 
 Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
 
@@ -23,7 +23,7 @@ Using Bootstrap’s typical naming structure, you can create a standard progress
 {% endcapture %}
 {% include example.html code=code %}
 
-### Progress without value
+## Progress without value
 
 Remove the showed value by adding a class called `.sr-only`.
 
@@ -32,7 +32,7 @@ Remove the showed value by adding a class called `.sr-only`.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Indeterminate progress
+## Indeterminate progress
 
 To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
 
@@ -41,7 +41,7 @@ To create indeterminate progress add `.progress-bar-indeterminate` to the `.prog
 {% endcapture %}
 {% include example.html code=code %}
 
-### Native progress element
+## Native progress element
 
 You can also use native HTML5 `<progress>` element.
 
@@ -50,7 +50,7 @@ You can also use native HTML5 `<progress>` element.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Progress color
+## Progress color
 
 Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
 

pages/_docs/range-slider.md

@@ -5,7 +5,7 @@ menu: docs.range-slider
 
 All options and features can be found [**here**](https://refreshless.com/nouislider/).
 
-### Basic range slider
+## Basic range slider
 
 {% capture code %}
 <div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
@@ -33,7 +33,7 @@ $(document).ready(function() {
 
 Basic range slider options.
 
-### js-name
+## js-name
 
 By setting `js-name` you can access slider in your js code. **Remember to use it in your code after the page has loaded.**
 ```js
@@ -55,7 +55,7 @@ function slider(){
 {% endcapture %}
 {% include example.html code=code %}
 
-### start
+## start
 
 The `start` option sets the number of handles and corresponding start positions.
 
@@ -71,7 +71,7 @@ The `start` option uses the slider's `'format'` option to decode the input. Numb
 {% endcapture %}
 {% include example.html code=code %}
 
-### range
+## range
 
 All values on the slider are part of a range. The range has a minimum and maximum value. **The minimum value cannot be equal to the maximum value.**
 
@@ -85,7 +85,7 @@ All values on the slider are part of a range. The range has a minimum and maximu
 {% endcapture %}
 {% include example.html code=code %}
 
-### step
+## step
 
 By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
 
@@ -99,7 +99,7 @@ By default, the slider slides fluently. In order to make the handles jump betwee
 {% endcapture %}
 {% include example.html code=code %}
 
-### connect
+## connect
 
 The connect option can be used to control the bar between the handles or the edges of the slider.
 
@@ -118,7 +118,7 @@ Setting true sets the bars between the handles, but not between the handles and
 {% endcapture %}
 {% include example.html code=code %}
 
-### margin
+## margin
 
 When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
 
@@ -130,7 +130,7 @@ When using two handles, the minimum distance between the handles can be set usin
 {% endcapture %}
 {% include example.html code=code %}
 
-### limit
+## limit
 
 The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
 
@@ -140,7 +140,7 @@ The `limit` option is the oposite of the margin option, limiting the maximum dis
 {% endcapture %}
 {% include example.html code=code %}
 
-### padding
+## padding
 
 Padding limits how close to the slider edges handles can be.
 

pages/_docs/ribbons.md

@@ -4,14 +4,14 @@ menu: docs.ribbons
 done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include cards/ribbon.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Ribbon position
+## Ribbon position
 
 You can easily change the position of a ribbon by adding a class to the element.
 
@@ -27,7 +27,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo
 {% endcapture %}
 {% include example.html code=code %}
 
-### Ribbon color
+## Ribbon color
 
 Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
@@ -36,7 +36,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
 {% endcapture %}
 {% include example.html code=code %}
 
-### Ribbon text
+## Ribbon text
 
 Set your own text in a ribbon.
 
@@ -45,7 +45,7 @@ Set your own text in a ribbon.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Ribbon style
+## Ribbon style
 
 Change the style of a ribbon. 
 

pages/_docs/spinners.md

@@ -5,7 +5,7 @@ bootstrap-link: components/spinners/
 done: true
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include ui/spinner.html %}
@@ -13,7 +13,7 @@ done: true
 {% include example.html code=code %}
 
 
-### Colors
+## Colors
 
 {% capture code %}
 {% for color in site.colors %}
@@ -23,7 +23,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Size
+## Size
 
 {% capture code %}
 {% include ui/spinner.html %}
@@ -31,7 +31,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Growing spinner
+## Growing spinner
 
 {% capture code %}
 {% include ui/spinner.html type="grow" %}
@@ -46,7 +46,7 @@ done: true
 {% endcapture %}
 {% include example.html code=code %}
 
-### Buttons
+## Buttons
 
 {% capture code %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}

pages/_docs/steps.md

@@ -8,21 +8,21 @@ new: true
 
 Steps are progress indicators of a sequence of task steps.
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include ui/steps.html show-title=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Tooltips
+## Tooltips
 
 {% capture code %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Color
+## Color
 
 {% capture code %}
 {% include ui/steps.html color="green" show-title=true %}
@@ -30,14 +30,14 @@ Steps are progress indicators of a sequence of task steps.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Steps without title
+## Steps without title
 
 {% capture code %}
 {% include ui/steps.html show-tooltip=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Steps with numbers
+## Steps with numbers
 
 {% capture code %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}

pages/_docs/tables.md

@@ -4,7 +4,7 @@ menu: docs.tables
 bootstrap-link: content/tables/
 ---
 
-### Basic Table
+## Basic Table
 
 A basic Bootstrap table has a light padding and only horizontal dividers.
 
@@ -15,7 +15,7 @@ The `.table` class adds basic styling to a table:
 {% endcapture %}
 {% include example.html code=code %}
 
-### No wrap
+## No wrap
 
 Prevents table cell content from wrapping to another line.
 

pages/_docs/tabs.md

@@ -4,44 +4,44 @@ menu: docs.tabs
 bootstrap-link: components/navs/
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include cards/tabs.html id="ex1" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Tabs with icons
+## Tabs with icons
 
 {% capture code %}
 {% include cards/tabs.html icons=true settings=true id="ex2" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Tabs only with icons
+## Tabs only with icons
 
 {% capture code %}
 {% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Tabs with dropdown
+## Tabs with dropdown
 
 {% capture code %}
 {% include cards/tabs.html dropdown=true id="ex4" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Full-width tabs
+## Full-width tabs
 
 {% capture code %}
 {% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Alternate style
+## Alternate style
 
 {% capture code %}
 {% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}

pages/_docs/timelines.md

@@ -3,13 +3,13 @@ title: Timelines
 menu: docs.timelines
 ---
 
-### Timeline
+## Timeline
 {% capture code %}
 {% include cards/timeline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Simple Timeline
+## Simple Timeline
 {% capture code %}
 {% include cards/timeline.html simple=true %}
 {% endcapture %}

pages/_docs/toasts.md

@@ -5,14 +5,14 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 {% include ui/toast.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Translucent
+## Translucent
 
 Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
 
@@ -21,7 +21,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
 {% endcapture %}
 {% include example.html code=code %}
 
-### Stacking toasts
+## Stacking toasts
 
 If you want to stack toasts just put them in the same container.
 

pages/_docs/tooltips.md

@@ -5,7 +5,7 @@ description: The Tooltip component is small pop-up box that appears when the use
 bootstrap-link: components/tooltips/
 ---
 
-### Default markup
+## Default markup
 
 {% capture code %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
@@ -23,7 +23,7 @@ bootstrap-link: components/tooltips/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Tooltip with HTML
+## Tooltip with HTML
 
 {% capture code %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">

pages/_docs/typography.md

@@ -5,7 +5,7 @@ description: Documentation and examples for common text utilities to control ali
 bootstrap-link: content/typography/
 ---
 
-### Headings
+## Headings
 
 {% capture code %}
 {% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
@@ -13,7 +13,7 @@ bootstrap-link: content/typography/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Paragraphs
+## Paragraphs
 
 {% capture code %}
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
@@ -21,7 +21,7 @@ bootstrap-link: content/typography/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Semantic text elements
+## Semantic text elements
 
 {% capture code %}
 <abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
@@ -44,14 +44,14 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
 {% endcapture %}
 {% include example.html code=code %}
 
-### Horizontal rules
+## Horizontal rules
 
 {% capture code %}
 <hr> 
 {% endcapture %}
 {% include example.html code=code %}
 
-#### Horizontal rules with label
+## Horizontal rules with label
 
 {% capture code %}
 <p>
@@ -79,7 +79,9 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
 {% include example.html code=code %}
 
 
-### Optimized for Asian, African, and Middle Eastern alphabets
+## Optimized for different alphabets
+
+Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages.
 
 {% capture code %}
 <h5>Chinese</h5>
@@ -114,7 +116,7 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
 {% endcapture %}
 {% include example.html code=code %}
 
-### Text transform
+## Text transform
 
 Transform text in components with text capitalization classes.
 
@@ -125,7 +127,7 @@ Transform text in components with text capitalization classes.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Letter spacing
+## Letter spacing
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
@@ -136,7 +138,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Line Height
+## Line Height
 
 Utilities for controlling the leading (line height) of an element.
 
@@ -148,7 +150,7 @@ Utilities for controlling the leading (line height) of an element.
 {% endcapture %}
 {% include example.html code=code %}
 
-### Antialiasing
+## Antialiasing
 
 Utilities for controlling the font smoothing of an element.
 
@@ -160,7 +162,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 {% endcapture %}
 {% include example.html code=code %}
 
-### Markdown elements
+## Markdown elements
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
 

pages/_includes/example.html

-{% assign demo-code = code %}
+{% assign code = code | replace_regex: '// @formatter:(off|on)', '' %}
 
+{% assign demo-code = code %}
 {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
-{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
 
 <div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
 	<div class="example-content">
+		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
 		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
 		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
 
@@ -12,6 +13,7 @@
 
 		{% if include.columns %}</div>{% endif %}
 		{% if include.wrapper %}</div>{% endif %}
+		{% if include.max-width %}</div>{% endif %}
 	</div>
 </div>
 

pages/_includes/forms/form-elements-1.html

-<div class="mb-3">
-	<label class="form-label">Static</label>
-	<div class="form-control-plaintext">Username</div>
-</div>
-<div class="mb-3">
-	<label class="form-label">Text</label>
-	<div class="form-hint">Here's some more info.</div>
-	<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
-</div>
-<div class="mb-3">
-	<label class="form-label">Password</label>
-	<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
-</div>
+{% include parts/form/input.html type="static" %}
+{% include parts/form/input.html type="text" hint="Here's some more info." %}
+{% include parts/form/input.html type="password" hint="Here's some more info." %}
+
 <div class="mb-3">
 	<label class="form-label">Disabled</label>
 	<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."

pages/_includes/forms/form-elements-2.html

@@ -10,10 +10,10 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Input group</label>
-   {% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
-   {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
-   {% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
+	<label class="form-label">Input group</label>
+	{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
+	{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
+	{% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
 </div>
 
 <div class="mb-3">

pages/_includes/forms/form-elements-3.html

@@ -2,18 +2,8 @@
 {% include parts/form/input-color.html %}
 {% include parts/form/input-colorpicker.html %}
 
-<div class="mb-3">
-   <label class="form-label">Validation States</label>
-   <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
-   <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
-   <div class="invalid-feedback">Invalid feedback</div>
-</div>
-
-<div class="mb-3">
-	<label class="form-label">Subtle validation States</label>
-	<input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
-	<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
-</div>
+{% include parts/form/validation-states.html %}
+{% include parts/form/validation-states.html lite=true %}
 
 <label class="form-label">Form fieldset</label>
 {% include parts/form/fieldset.html %}
\ No newline at end of file

pages/_includes/parts/form/input.html

+{% assign type = include.type %}
+
+{% if type == 'static' %}
+	<div class="mb-3">
+		<label class="form-label">{{ include.label | default: 'Static' }}</label>
+		<div class="form-control-plaintext">{{ include.value | default: 'Input value' }}</div>
+	</div>
+
+{% elsif type == 'text' %}
+	<div class="mb-3">
+		<label class="form-label">{{ include.label | default: 'Text' }}</label>
+		<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
+	</div>
+
+{% elsif type == 'password' %}
+	<div class="mb-3">
+		<label class="form-label">{{ include.label | default: 'Password' }}</label>
+		<input type="text" class="form-control" name="example-password-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
+	</div>
+
+{% elsif type == 'textarea' %}
+<div class="mb-3">
+	<label class="form-label">{{ include.label | default: 'Textarea' }}</label>
+	<textarea class="form-control" name="example-textarea" placeholder="{{ include.placeholder | default: 'Textarea placeholder' }}">{{ include.value }}</textarea>
+</div>
+
+{% endif %}
\ No newline at end of file

pages/_includes/parts/form/validation-states.html

+<div class="mb-3">
+	<label class="form-label">Validation States</label>
+	<input type="text" class="form-control is-valid{% if include.lite %} is-valid-lite{% endif %} mb-2" placeholder="Valid State..">
+	<input type="text" class="form-control is-invalid{% if include.lite %} is-invalid-lite{% endif %}" placeholder="Invalid State..">
+	{% unless include.lite %}<div class="invalid-feedback">Invalid feedback</div>{% endunless %}
+</div>
\ No newline at end of file

pages/_layouts/docs.html

@@ -10,10 +10,14 @@ page-header: Documentation
 <div class="row justify-content-center">
 	<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
 
+		{% assign toc = content | toc_only %}
+
 
 		<div class="sticky-top pt-4">
-			<h5 class="subheader">On this page</h5>
-			{{ content | toc_only }}
+			{% if toc != '' %}
+				<h5 class="subheader">On this page</h5>
+				{{ toc }}
+			{% endif %}
 
 			{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" icon-color="github" external=true block=true class="mb-4" %}
 		</div>
@@ -43,9 +47,7 @@ page-header: Documentation
 
 				<div class="markdown">
 					<div class="d-flex">
-						<h2 class="h1 mt-0 mb-3">{{ page.title }}
-							{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}
-						</h2>
+						<h2 class="h1 mt-0 mb-3">{{ page.title }}</h2>
 
 						{% if page.bootstrap-link %}
 						<p class="ml-auto">

scss/_variables.scss

@@ -147,7 +147,7 @@ $lead-font-size: $h4-font-size !default;
 $lead-font-weight: 400 !default;
 
 $hr-opacity: .1 !default;
-$hr-margin-y: 1rem !default;
+$hr-margin-y: 2rem !default;
 
 $caret-spacing: .4em !default;
 

scss/demo/_highlight.scss

@@ -8,7 +8,7 @@ $code-gray: #a0aec0;
 
 pre.highlight,
 .highlight pre {
-  max-height: 40rem;
+  max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
   font-size: $code-font-size;