diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md
index 0e7792735..3b02c8e1a 100644
--- a/pages/_docs/alerts.md
+++ b/pages/_docs/alerts.md
@@ -8,72 +8,76 @@ done: true
 
 ### Default markup
 
-description here
-
-22222 test mmmm 2222
-
-{% example %}
+{% capture code %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
 	{% endcapture %}
 	{% include ui/alert.html type=variant.name text=variant-text %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Alert Links
 
 Add the `alert-link` class to any links inside the alert box to create "matching colored links":
 
-{% example %}
+{% capture code %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — <a href="#" class="alert-link">check it out</a>!
 	{% endcapture %}
 	{% include ui/alert.html type=variant.name text=variant-text %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Dismissible Alerts
 
-{% example %}
+{% capture code %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
 	{% endcapture %}
 	{% include ui/alert.html type=variant.name text=variant-text close=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Alerts with icons
 
-{% example %}
+{% capture code %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
 	{% endcapture %}
 	{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Alert with avatar
-{% example %}
+
+{% capture code %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 	{% endcapture %}
 	{% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Alert with buttons
-{% example %}
- {% capture variant-text %}
+
+{% capture code %}
+{% capture variant-text %}
  	<h3>Some Title</h3>
  	<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  {% endcapture %}
  {% include ui/alert.html type='success' close=true text=variant-text buttons=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
diff --git a/pages/_docs/autosize.md b/pages/_docs/autosize.md
index 058bb7787..79333e82d 100644
--- a/pages/_docs/autosize.md
+++ b/pages/_docs/autosize.md
@@ -7,7 +7,8 @@ done: true
 
 ### Default markup
 
-{% example html %}
+{% capture code %}
 <label class="form-label">Autosize example</label>
 {% include ui/form/textarea-autosize.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index 4bc0f64bb..cfdf5a07b 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -7,110 +7,120 @@ done: true
 
 ### Default markup
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html person-id=1 %}
 {% include ui/avatar.html person-id=2 %}
 {% include ui/avatar.html person-id=3 %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatar image
 
 Set an image as the background.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html person-id=1 %}
 {% include ui/avatar.html person-id=3 %}
 {% include ui/avatar.html person-id=4 %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Initials
 
 You can easily use initials instead of images.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html placeholder="AB" %}
 {% include ui/avatar.html placeholder="CD" %}
 {% include ui/avatar.html placeholder="EF" %}
 {% include ui/avatar.html placeholder="GH" %}
 {% include ui/avatar.html placeholder="IJ" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatar icons
 
 You can also use icons in avatars.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html icon="user" %}
 {% include ui/avatar.html icon="plus" %}
 {% include ui/avatar.html icon="user-plus" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatar initials color
 
 Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html placeholder="AB" color="green" %}
 {% include ui/avatar.html placeholder="CD" color="red" %}
 {% include ui/avatar.html placeholder="EF" color="yellow" %}
 {% include ui/avatar.html placeholder="GH" color="blue" %}
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html person-id=10 size="xl" %}
 {% include ui/avatar.html person-id=9 size="lg" %}
 {% include ui/avatar.html person-id=8 size="md" %}
 {% include ui/avatar.html person-id=7 %}
 {% include ui/avatar.html person-id=6 size="sm" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatar status
 
 Add an online or offline status indicator to show user's availability.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html person-id=11 %}
 {% include ui/avatar.html person-id=12 status="danger" %}
 {% include ui/avatar.html person-id=13 status="success" %}
 {% include ui/avatar.html person-id=14 status="warning" %}
 {% include ui/avatar.html person-id=15 status="info" %}
 {% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes.
 
-{% example html wrapper=avatar-list %}
+{% capture code %}
 {% include ui/avatar.html person-id=17 %}
 {% include ui/avatar.html person-id=18 shape="rounded" %}
 {% include ui/avatar.html person-id=19 shape="rounded-circle" %}
 {% include ui/avatar.html person-id=20 shape="rounded-0" %}
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Avatars list
 
 You can easily create a list of avatars.
 
-{% example %}
+{% capture code %}
 {% include ui/avatar-list.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Stacked list
 
 Make the list stack when it reaches a certain length.
 
-{% example %}
+{% capture code %}
 <div class="avatar-list avatar-list-stacked">
   {% 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>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index e4249c72e..b7d13a3b8 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -8,51 +8,56 @@ done: true
 
 ### Default markup
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Pill badges
 
 To make a pill bagde (with rounded corners) add `.bagde-pill` class.
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 <span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### 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.
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Links
 
 Make a badge work as a link by putting it into an `<a>` element.
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Empty badges
 
 If you don't want your badge to contain any text you can do it by leaving the html element empty.
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}"></a>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/breadcrumb.md b/pages/_docs/breadcrumb.md
index 9b06afd5f..d7f76e0df 100644
--- a/pages/_docs/breadcrumb.md
+++ b/pages/_docs/breadcrumb.md
@@ -11,28 +11,33 @@ bootstrap-link: components/breadcrumb/
  
 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.
 
-{% example %}
+{% capture code %}
 {% include ui/breadcrumb.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Breadcrumb variations
 
 You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
 
-{% example %}
+{% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-dots" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
-{% example %}
+{% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-arrows" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
-{% example %}
+{% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-bullets" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Alternate version
 
-{% example %}
+{% capture code %}
 {% include ui/breadcrumb.html class="breadcrumb-alternate" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md
index 06b6c272b..cab31342c 100644
--- a/pages/_docs/buttons.md
+++ b/pages/_docs/buttons.md
@@ -6,110 +6,120 @@ bootstrap-link: components/buttons/
 done: true
 ---
 
-
 ### 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).
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <a href="#" class="btn btn-primary" role="button">Link</a>
 <button class="btn btn-primary">Button</button>
 <input type="button" class="btn btn-primary" value="Input"/>
 <input type="submit" class="btn btn-primary" value="Submit"/>
 <input type="reset" class="btn btn-primary" value="Reset"/>
-{% endexample %}
+{% endcapture  %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
+
 
 ### 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.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.button-variants %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### 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.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.button-variants %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title disabled=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 
 ### Color variations
 
 The classic button, in different colors.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.colors %}
 <a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Square buttons
 
 Add `.btn-square` to button to remove border-radius.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.button-variants %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title square=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Pill buttons
 
 Add `.btn-pill` class to any button to make them more rounded.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.button-variants %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title pill=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### 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.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% for button in site.button-variants %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html text=btn-title color=btn-color outline=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Button size
 
 Add `.btn-lg` or `.btn-sm` for additional sizes.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-secondary btn-lg">Large button</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
 
-{% example html %}
+{% capture code %}
 <button type="button" class="btn btn-primary btn-block">Block level button</button>
 <button type="button" class="btn btn-secondary btn-block">Block level button</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Button with icon
 
@@ -117,99 +127,90 @@ Basic buttons are traditional buttons with borders and background with an extra
 
 Icons can be found [**here**](/docs/icons.html#icons)
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <button type="button" class="btn btn-dark">
-{% include ui/icon.html icon="upload" class="icon-sm" %}
+{% include ui/icon.html icon="upload" %}
 Upload
 </button>
 <button type="button" class="btn btn-warning">
-{% include ui/icon.html icon="heart" class="icon-sm" %}
+{% include ui/icon.html icon="heart" %}
 I like
 </button>
 <button type="button" class="btn btn-success">
-{% include ui/icon.html icon="check" class="icon-sm" %}
+{% include ui/icon.html icon="check" %}
 I agree
 </button>
 <button type="button" class="btn btn-outline-primary">
-{% include ui/icon.html icon="plus" class="icon-sm" %}
+{% include ui/icon.html icon="plus" %}
 More
 </button>
 <button type="button" class="btn btn-danger">
-{% include ui/icon.html icon="link" class="icon-sm" %}
+{% include ui/icon.html icon="link" %}
 Link
 </button>
 <button type="button" class="btn btn-info">
-{% include ui/icon.html icon="message-circle" class="icon-sm" %}
+{% include ui/icon.html icon="message-circle" %}
 Comment
 </button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Social buttons
 
 A button can be formatted to link to a social website
 
-{% example html wrapper=btn-list %} 
+{% capture code %}
 {% for button in site.socials %}
 {% assign btn-icon = button[1].icon %}
 {% assign btn-title = button[1].title %}
 {% assign btn-color = button[0] %}
 {% include ui/button.html color=btn-color icon=btn-icon text=btn-title %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 You can use only icons.
 
-{% example html wrapper=btn-list %} 
+{% capture code %}
 {% for button in site.socials %}
 {% assign btn-icon = button[1].icon %}
 {% assign btn-color = button[0] %}
 {% include ui/button.html color=btn-color icon=btn-icon icon-only=true %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
 
 ### Icon buttons
 
 Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
 
-{% example html wrapper=btn-list %} 
-<button type="button" class="btn btn-icon btn-primary">
-{% include ui/icon.html icon="activity" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-github">
-{% include ui/icon.html icon="github" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-success">
-{% include ui/icon.html icon="bell" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-warning">
-{% include ui/icon.html icon="star" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-danger">
-{% include ui/icon.html icon="trash-2" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-purple">
-{% include ui/icon.html icon="bar-chart" class="icon-sm" %}
-</button>
-<button type="button" class="btn btn-icon btn-primary btn-secondary">
-{% include ui/icon.html icon="git-merge" class="icon-sm" %}
-</button>
-{% endexample %}
+{% capture code %}
+{% include ui/button.html icon="activity" color="primary" icon-only=true %}
+{% include ui/button.html icon="github" color="github" icon-only=true %}
+{% include ui/button.html icon="bell" color="success" icon-only=true %}
+{% include ui/button.html icon="star" color="warning" icon-only=true %}
+{% include ui/button.html icon="trash-2" color="danger" icon-only=true %}
+{% include ui/button.html icon="bar-chart" color="purple" icon-only=true %}
+{% include ui/button.html icon="git-merge" color="secondary" icon-only=true %}
+{% endcapture %}
+{% include example.html code=code %}
+
 
 ### 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.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <div class="dropdown">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-     {% include ui/icon.html icon="calendar" class="icon-sm" %}
+     {% include ui/icon.html icon="calendar" %}
   </button>
   {% include ui/dropdown-menu.html %}
 </div>
 
 <div class="dropdown">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-     {% include ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
+     {% include ui/icon.html icon="calendar" %}Show calendar
   </button>
   {% include ui/dropdown-menu.html %}
 </div>
@@ -220,7 +221,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
   </button>
   {% include ui/dropdown-menu.html %}
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Loading button
 
@@ -228,25 +230,27 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
 
 Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% include ui/button.html color="primary" text="Button" spinner=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### List of buttons
 
 You can now create a list of buttons with the `.btn-list` container.
 
-{% example html %}
+{% capture code %}
 <div class="btn-list">
   <a href="#" class="btn btn-success">Save changes</a>
   <a href="#" class="btn btn-secondary">Save and continue</a>
   <a href="#" class="btn btn-danger">Cancel</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
 
-{% example html %}
+{% capture code %}
 <div class="btn-list">
   <a href="#" class="btn btn-secondary">One</a>
   <a href="#" class="btn btn-secondary">Two</a>
@@ -268,27 +272,30 @@ If the list is very long, it will automatically wrap on multiple lines, while ke
   <a href="#" class="btn btn-secondary">Eighteen</a>
   <a href="#" class="btn btn-secondary">Nineteen</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
 
-{% example html %}
+{% capture code %}
 <div class="btn-list text-center">
   <a href="#" class="btn btn-primary">Save changes</a>
   <a href="#" class="btn btn-secondary">Save and continue</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
-{% example html %}
+{% capture code %}
 <div class="btn-list text-right">
   <a href="#" class="btn btn-primary">Save changes</a>
   <a href="#" class="btn btn-secondary">Save and continue</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Button with avatar
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <a href="#" class="btn btn-secondary">
   {% include ui/avatar.html person-id="4" %} Avatar
 </a>
@@ -298,5 +305,5 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
 <a href="#" class="btn btn-secondary">
   {% include ui/avatar.html person-id="6" %} Avatar
 </a>
-{% endexample %}
-
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
index 0e2810d7c..72829a679 100644
--- a/pages/_docs/cards.md
+++ b/pages/_docs/cards.md
@@ -10,28 +10,31 @@ The `.card` element is simply a container with a shadow, a border, a radius, and
 
 ### Default card
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/card.html body="This is some text within a card body." %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Card with title and image
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/card.html img-top=true title="Card with title and image" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 ### Blog post card
 
 The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/blog-single.html type="image" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Row deck
 
 If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
 
-{% example html columns=3 %}
+{% capture code %}
 <div class="row row-deck">
     <div class="col-md-4">
         <div class="card">
@@ -49,19 +52,21 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
         </div>
     </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Post card with aside image
 
 You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
 
-{% example html columns=3 %}
+{% capture code %}
 {% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Color variations
 
-{% example html columns=3 %}
+{% capture code %}
 <div class="row row-deck">
     <div class="col-md-6">
         {% include cards/card.html status-top="danger" title="Card with top status" %}
@@ -70,17 +75,20 @@ You can also add the image on the left side of the card. All you need do to is:
         {% include cards/card.html status-left="green" title="Card with side status" %}
     </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Stacked card
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/card.html class="card-stacked" title="Stacked card" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ## Tabbed card
 
-{% example html columns=2 %}
+{% capture code %}
 {% include cards/card-tabs.html count=4 %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md
index a2a711603..3b3a07c37 100644
--- a/pages/_docs/carousel.md
+++ b/pages/_docs/carousel.md
@@ -5,6 +5,7 @@ description: The Carousel is a slideshow for cycling through elements.
 bootstrap-link: components/carousel/
 ---
 
-{% example html columns=1 %}
+{% capture code %}
 {% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/charts.md b/pages/_docs/charts.md
index 31a879a6e..38233bbd4 100644
--- a/pages/_docs/charts.md
+++ b/pages/_docs/charts.md
@@ -7,7 +7,7 @@ menu: docs.charts
 
 {% for chart in site.data.charts %}
 {% if chart[1].display %}
-{% example html %}
+{% capture code %}
 {% assign data = chart[0] %}
 {% assign key = 'chart-' | append: data %}
 	<div class="card">
@@ -19,6 +19,7 @@ menu: docs.charts
 		</div>
 	</div>
 	{% include ui/chart.html id=key chart-id=data show-scripts=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 {% endif %}
 {% endfor %}
diff --git a/pages/_docs/countup.md b/pages/_docs/countup.md
index 79e3a0a44..62716848e 100644
--- a/pages/_docs/countup.md
+++ b/pages/_docs/countup.md
@@ -11,105 +11,116 @@ To make countup add `data-countup` to any html text tag.
 
 Set number to count up.
 
-{% example %}
-    <h1 data-countup>30000</h1>
-{% endexample %}
+{% capture code %}
+<h1 data-countup>30000</h1>
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Duration
 
 Set the `duration` of the countup. (2s is set by default)
 
-{% example %}
-    <h1 data-countup>30000</h1>
+{% capture code %}
+<h1 data-countup>30000</h1>
     <h1 data-countup='{"duration":4}'>30000</h1>
     <h1 data-countup='{"duration":6}'>30000</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Starting value
 
 Set the start value of countup using `startVal`.
 If you set it bigger than the `count`, countup will run reverse.
 
-{% example %}
-    <h1 data-countup='{"startVal":12345}'>30000</h1>
-    <h1 data-countup='{"startVal":47655}'>30000</h1>
-{% endexample %}
+{% capture code %}
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+<h1 data-countup='{"startVal":47655}'>30000</h1>
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Decimal places
 
 Set how many decimal places to show using `decimalPlaces`.
 
-{% example %}
-    <h1 data-countup>3.123</h1>
+{% capture code %}
+<h1 data-countup>3.123</h1>
     <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
     <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
     <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Easing
 
 Disable easing using `"useEasing": false`. (`true` by default)
 
-{% example %}
-    <h1 data-countup>30000</h1>
+{% capture code %}
+<h1 data-countup>30000</h1>
     <h1 data-countup='{"useEasing": false}'>30000</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Use grouping
 
 Disable grouping using `"useGrouping": false`. (`true` by default)
 
-{% example %}
-    <h1 data-countup>30000</h1>
+{% capture code %}
+<h1 data-countup>30000</h1>
     <h1 data-countup='{"useGrouping": false}'>30000</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Separator
 
 Set seperator that seperates groups using `separator`. (`,` by default)
 
-{% example %}
-    <h1 data-countup>3000000</h1>
+{% capture code %}
+<h1 data-countup>3000000</h1>
     <h1 data-countup='{"separator":" "}'>3000000</h1>
     <h1 data-countup='{"separator":"-"}'>3000000</h1>
     <h1 data-countup='{"separator":":"}'>3000000</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Decimal separator
 
 Set decimal separator using `decimal`. (`.` by default)
 
-{% example %}
-    <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
+{% capture code %}
+<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
     <h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
     <h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
     <h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Prefix
 
 Set countup prefix using `prefix`.
 
-{% example %}
-    <h1 data-countup='{"prefix":"$"}'>30000</h1>
+{% capture code %}
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
     <h1 data-countup='{"prefix":"€"}'>30000</h1>
     <h1 data-countup='{"prefix":"£"}'>30000</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Suffix
 
 Set countup suffix using `suffix`.
 
-{% example %}
-    <h1 data-countup='{"suffix":"%"}'>30</h1>
+{% capture code %}
+<h1 data-countup='{"suffix":"%"}'>30</h1>
     <h1 data-countup='{"suffix":"‰"}'>30</h1>
     <h1 data-countup='{"suffix":"k"}'>30</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 Of course you can mix all of these:
 
-{% example %}
-    <h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
-{% endexample %}
+{% capture code %}
+<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+{% endcapture %}
+{% include example.html code=code %}
 
 To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
diff --git a/pages/_docs/cursors.md b/pages/_docs/cursors.md
index ea745f8db..0c04c8384 100644
--- a/pages/_docs/cursors.md
+++ b/pages/_docs/cursors.md
@@ -12,7 +12,7 @@ menu: docs.cursors
 - `.cursor-zoom-in` - cursor showing that user can zoom in
 - `.cursor-zoom-out` - cursor showing that user can zoom out
 
-{% example html %}
+{% capture code %}
 <div class="row text-center">
   <div class="col-4 mb-3">
     <div class="cursor-auto bg-light py-3">Cursor auto</div>
@@ -33,4 +33,5 @@ menu: docs.cursors
     <div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md
index 271daf6d6..a2e996bb7 100644
--- a/pages/_docs/divider.md
+++ b/pages/_docs/divider.md
@@ -6,7 +6,7 @@ done: true
 ---
 ### Default markup
 
-{% example html columns=1 %}
+{% capture code %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
@@ -22,13 +22,14 @@ done: true
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Divider color
 
 Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
-{% example html columns=1 %}
+{% capture code %}
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -36,4 +37,5 @@ 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>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/empty.md b/pages/_docs/empty.md
index 961aff58b..cd1cc5a40 100644
--- a/pages/_docs/empty.md
+++ b/pages/_docs/empty.md
@@ -5,12 +5,14 @@ description: Empty states/blanks are commonly used as placeholders for first tim
 
 ### Default markup
 
-{% example html %}
+{% capture code %}
 {% include ui/empty.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Empty state with illustration
 
-{% example html %}
+{% capture code %}
 {% include ui/empty.html illustration=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md
index 3a6e6486f..80d9e1bef 100644
--- a/pages/_docs/flags.md
+++ b/pages/_docs/flags.md
@@ -7,22 +7,24 @@ done: true
 
 ### Flag
 
-{% example html %}
+{% capture code %}
 {% include ui/flag.html flag="tg" class="mr-1" %}
 {% include ui/flag.html flag="br" class="mr-1" %}
 {% include ui/flag.html flag="pt" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example html %}
+{% capture code %}
 {% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
 {% include ui/flag.html flag="pl" size="lg" class="mr-1" %}
 {% include ui/flag.html flag="pl" size="md" %}
 {% include ui/flag.html flag="pl" class="mr-1" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Types
 
diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md
index fa67995c2..7599c02c5 100644
--- a/pages/_docs/form-elements.md
+++ b/pages/_docs/form-elements.md
@@ -5,7 +5,7 @@ bootstrap-link: components/forms/
 
 ### Classic Input
 
-{% example %}
+{% capture code %}
 <div class="mb-2">
   <label class="form-label">Static</label>
 <div class="form-control-plaintext">Username</div>
@@ -26,10 +26,11 @@ bootstrap-link: components/forms/
    <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
           value="Well, how'd you become king, then?" readonly>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Password and validation
-{% example %}
+{% capture code %}
 <div class="mb-2">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
@@ -51,7 +52,8 @@ bootstrap-link: components/forms/
 
    <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input size
 
@@ -59,73 +61,85 @@ bootstrap-link: components/forms/
 
 
 ### Select
-{% example %}
+{% capture code %}
 {% include parts/form/select.html options="Germany,USA,Poland" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Textarea
-{% example %}
+{% 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>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Image check
-{% example %}
+{% capture code %}
 {% include parts/form/input-image.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input color
-{% example %}
+{% capture code %}
 {% include parts/form/input-color.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input color picker
-{% example %}
+{% capture code %}
 {% include parts/form/input-colorpicker.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Datalists
-{% example %}
+{% capture code %}
 {% include parts/form/input-datalist.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Custom selectboxes
-{% example %}
+{% capture code %}
 {% include parts/form/input-selectgroups.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Toggle switches
-{% example %}
+{% capture code %}
 {% include parts/form/input-toggle.html %}
 {% include parts/form/input-toggle-single.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Radios
-{% example %}
+{% capture code %}
 {% include parts/form/input-radios.html %}
 {% include parts/form/input-radios-inline.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Checkboxes
-{% example %}
+{% capture code %}
 {% include parts/form/input-checkboxes.html %}
 {% include parts/form/input-checkboxes-inline.html %}
-{% endexample%}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Range input
-{% example %}
+{% capture code %}
 {% include parts/form/input-range.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Sample form
-{% example %}
+{% capture code %}
 {% include parts/form/fieldset.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input group
-{% example %}
+{% capture code %}
 <div class="mb-2">
    <label class="form-label">Input group</label>
    <div class="input-group">
@@ -158,20 +172,23 @@ bootstrap-link: components/forms/
       </div>
    </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input with icon
-{% example %}
+{% capture code %}
 {% include parts/form/input-icon.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Separated inputs
-{% example %}
+{% capture code %}
 {% include parts/form/input-icon-separated.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Custom Input examples
-{% example %}
+{% capture code %}
 <div class="mb-2">
    <label class="form-label">Username</label>
    {% include ui/form/input-group.html prepend="@" placeholder="username" %}
@@ -191,10 +208,11 @@ bootstrap-link: components/forms/
    <label class="form-label">Price</label>
    {% include ui/form/input-group.html prepend="$" append=".00" %}
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Date component
-{% example %}
+{% capture code %}
 <div class="mb-2">
    <label class="form-label">Date of birth</label>
    <div class="row row-sm">
@@ -231,10 +249,11 @@ bootstrap-link: components/forms/
       </div>
    </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Input with button
-{% example %}
+{% capture code %}
 <div class="mb-2">
    <label class="form-label">Button input</label>
    <div class="input-group">
@@ -254,4 +273,5 @@ bootstrap-link: components/forms/
       <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/form-helpers.md b/pages/_docs/form-helpers.md
index 34077163d..916dd048e 100644
--- a/pages/_docs/form-helpers.md
+++ b/pages/_docs/form-helpers.md
@@ -4,6 +4,7 @@ title: Form helpers
 
 ### Input help
 
-{% example %}
+{% 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>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/input-mask.md b/pages/_docs/input-mask.md
index 27d5f7e36..b788e1876 100644
--- a/pages/_docs/input-mask.md
+++ b/pages/_docs/input-mask.md
@@ -2,7 +2,8 @@
 title: Input mask
 ---
 
-{% example %}
+{% 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 %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/payments.md b/pages/_docs/payments.md
index cb84f83b0..deb21dc88 100644
--- a/pages/_docs/payments.md
+++ b/pages/_docs/payments.md
@@ -7,22 +7,24 @@ done: true
 
 ### Payment
 
-{% example %}
+{% capture code %}
 {% include ui/payment.html class="mr-3" payment="shopify"%}
 {% include ui/payment.html class="mr-3" payment="visa" %}
 {% include ui/payment.html class="mr-3" payment="paypal"%}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example %}
+{% capture code %}
 {% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
 {% include ui/payment.html class="mr-3" payment="visa" size="lg" %}
 {% include ui/payment.html class="mr-3" payment="paypal" size="md" %}
 {% include ui/payment.html class="mr-3" payment="amazon" size="sm" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Types
 
diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md
index 5ad170245..9ae22e1a4 100644
--- a/pages/_docs/progress.md
+++ b/pages/_docs/progress.md
@@ -9,49 +9,55 @@ done: true
 
 To create a default progress bar, add a `.progress` class to a `<div>` element:
 
-{% example html %}
+{% capture code %}
 {% include ui/progress.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example html %}
+{% capture code %}
 {% include ui/progress.html value=57 size="sm" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Progress without value
 
 Remove the showed value by adding a class called `.sr-only`.
 
-{% example html %}
+{% capture code %}
 {% include ui/progress.html value=75 show-value=false %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Indeterminate progress
 
 To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
 
-{% example html %}
+{% capture code %}
 {% include ui/progress.html indeterminate=true size="sm" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Native progress element
 
 You can also use native HTML5 `<progress>` element.
 
-{% example html %}
+{% capture code %}
 <progress class="progress progress-sm" value="15" max="100"/>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Progress color
 
 Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
-{% example %}
+{% capture code %}
 {% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %} 
 {% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %} 
 {% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %} 
 {% include ui/progress.html size="sm" color="pink" %} 
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/range-slider.md b/pages/_docs/range-slider.md
index 949415b93..249fcbf27 100644
--- a/pages/_docs/range-slider.md
+++ b/pages/_docs/range-slider.md
@@ -7,10 +7,11 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ### Basic range slider
 
-{% example %}
-    <div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
     <p demo-slider="slider0"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 That's how values are displayed:
 
@@ -48,10 +49,11 @@ function slider(){
 }
 ```
 
-{% example %}
-    <div data-slider='{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'></div>
     <p id="sliderText" demo-slider="slider1"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### start
 
@@ -59,40 +61,43 @@ The `start` option sets the number of handles and corresponding start positions.
 
 The `start` option uses the slider's `'format'` option to decode the input. Number input will be cast to string and decoded.
 
-{% example %}
-    <div data-slider='{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'></div>
     <p demo-slider="slider2"></p>
     <div data-slider='{"js-name": "slider3","start": [40,65],"range": {"min": 0,"max": 100}}'></div>
     <p demo-slider="slider3"></p>
     <div data-slider='{"js-name": "slider4","start": [25,50,75],"range": {"min": 0,"max": 100}}'></div>
     <p demo-slider="slider4"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.**
 
-{% example %}
-    <div data-slider='{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'></div>
     <p demo-slider="slider5"></p>
     <div data-slider='{"js-name": "slider6","start": [-250,800],"range": {"min": -500,"max": 1000}}'></div>
     <p demo-slider="slider6"></p>
     <div data-slider='{"js-name": "slider7","start": [0.1,0.4,0.9],"range": {"min": 0.1,"max": 1}}'></div>
     <p demo-slider="slider7"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### step
 
 By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
 
-{% example %}
-    <div data-slider='{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'></div>
     <p demo-slider="slider8"></p>
     <div data-slider='{"js-name": "slider9","start": 500,"range": {"min": 100,"max": 1000},"step": 125}'></div>
     <p demo-slider="slider9"></p>
     <div data-slider='{"js-name": "slider10","start": 50,"range": {"min": 10,"max": 100},"step": 5}'></div>
     <p demo-slider="slider10"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### connect
 
@@ -103,42 +108,46 @@ For sliders with 2 or more handles, pass an array with a boolean for every conne
 
 Setting true sets the bars between the handles, but not between the handles and the sliders edges.
 
-{% example %}
-    <div data-slider='{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'></div>
     <p demo-slider="slider11"></p>
     <div data-slider='{"js-name": "slider12","start": 8000,"connect": "upper","range": {"min": [2000],"max": [20000]}}'></div>
     <p demo-slider="slider12"></p>
     <div data-slider='{"js-name": "slider13","start": [4000, 8000, 12000, 16000],"connect": [false, true, true, false, true],"range": {"min": [2000],"max": [20000]}}'></div>
     <p demo-slider="slider13"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example %}
-    <div data-slider='{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'></div>
     <p demo-slider="slider14"></p>
     <div data-slider='{"js-name": "slider15","start": [20,80],"range": {"min": 0,"max": 100},"margin":50}'></div>
     <p demo-slider="slider15"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example %}
-    <div data-slider='{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'></div>
     <p demo-slider="slider16"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### padding
 
 Padding limits how close to the slider edges handles can be.
 
-{% example %}
-    <div data-slider='{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'></div>
+{% capture code %}
+<div data-slider='{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'></div>
     <p demo-slider="slider17"></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
\ No newline at end of file
diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md
index ab1b4e68e..241e75817 100644
--- a/pages/_docs/ribbons.md
+++ b/pages/_docs/ribbons.md
@@ -6,9 +6,10 @@ done: true
 
 ### Default markup
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/ribbon.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Ribbon position
 
@@ -21,30 +22,34 @@ You can easily change the position of a ribbon by adding a class to the element.
 
 You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/ribbon.html top=true left=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Ribbon color
 
 Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/ribbon.html color="red" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Ribbon text
 
 Set your own text in a ribbon.
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/ribbon.html color="green" text="-50%" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Ribbon style
 
 Change the style of a ribbon. 
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md
index 029c50231..24b2ce66f 100644
--- a/pages/_docs/spinners.md
+++ b/pages/_docs/spinners.md
@@ -7,46 +7,52 @@ done: true
 
 ### Default markup
 
-{% example %}
+{% capture code %}
 {% include ui/spinner.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Colors
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Size
 
-{% example %}
+{% capture code %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Growing spinner
 
-{% example %}
+{% capture code %}
 {% include ui/spinner.html type="grow" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
-{% example %}
+{% capture code %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c type="grow" %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Buttons
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}
 {% include ui/button.html spinner=true text="Button" color="danger" %}
 {% include ui/button.html spinner=true text="Button" color="warning" %}
 {% include ui/button.html spinner=true color="success" %}
 {% include ui/button.html spinner=true color="secondary" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md
index 2682cc198..4d24f3e9c 100644
--- a/pages/_docs/steps.md
+++ b/pages/_docs/steps.md
@@ -10,31 +10,36 @@ Steps are progress indicators of a sequence of task steps.
 
 ### Default markup
 
-{% example %}
+{% capture code %}
 {% include ui/steps.html show-title=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Tooltips
 
-{% example %}
+{% capture code %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Color
 
-{% example %}
+{% capture code %}
 {% include ui/steps.html color="green" show-title=true %}
 {% include ui/steps.html color="red" show-title=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Steps without title
 
-{% example %}
+{% capture code %}
 {% include ui/steps.html show-tooltip=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Steps with numbers
 
-{% example %}
+{% capture code %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md
index e9e51c5fa..2970f7056 100644
--- a/pages/_docs/tables.md
+++ b/pages/_docs/tables.md
@@ -10,14 +10,16 @@ A basic Bootstrap table has a light padding and only horizontal dividers.
 
 The `.table` class adds basic styling to a table:
 
-{% example %}
+{% capture code %}
 {% include ui/table.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### No wrap
 
 Prevents table cell content from wrapping to another line.
 
-{% example %}
+{% capture code %}
 {% include ui/table.html nowrap=true responsive=true %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md
index fe5a82de2..0b6540952 100644
--- a/pages/_docs/tabs.md
+++ b/pages/_docs/tabs.md
@@ -6,36 +6,42 @@ bootstrap-link: components/navs/
 
 ### Default markup
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html id="ex1" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Tabs with icons
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html icons=true settings=true id="ex2" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Tabs only with icons
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Tabs with dropdown
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html dropdown=true id="ex4" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Full-width tabs
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Alternate style
 
-{% example html columns=1 %}
+{% capture code %}
 {% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/timelines.md b/pages/_docs/timelines.md
index 131d45203..df4608675 100644
--- a/pages/_docs/timelines.md
+++ b/pages/_docs/timelines.md
@@ -4,11 +4,13 @@ menu: docs.timelines
 ---
 
 ### Timeline
-{% example html columns=3 %}
-	{% include cards/timeline.html %}
-{% endexample %}
+{% capture code %}
+{% include cards/timeline.html %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Simple Timeline
-{% example html columns=1 %}
-	{% include cards/timeline.html simple=true %}
-{% endexample %}
+{% capture code %}
+{% include cards/timeline.html simple=true %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index faf9efda2..0f95cefa7 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -7,23 +7,26 @@ bootstrap-link: components/toasts/
 
 ### Default markup
 
-{% example %}
+{% capture code %}
 {% include ui/toast.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example html class=bg-gray %}
+{% capture code %}
 {% include ui/toast.html %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Stacking toasts
 
 If you want to stack toasts just put them in the same container.
 
-{% example %}
+{% capture code %}
 {% include ui/toast.html person-id=3 %}
 {% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
-{% endexample %}
\ No newline at end of file
+{% endcapture %}
+{% include example.html code=code %}
\ No newline at end of file
diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md
index f61b6aabb..2676366ed 100644
--- a/pages/_docs/tooltips.md
+++ b/pages/_docs/tooltips.md
@@ -7,7 +7,7 @@ bootstrap-link: components/tooltips/
 
 ### Default markup
 
-{% example html wrapper=btn-list %}
+{% capture code %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
@@ -20,12 +20,14 @@ bootstrap-link: components/tooltips/
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
   Tooltip on left
 </button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Tooltip with HTML
 
-{% example html wrapper=btn-list %}
+{% 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>">
   Tooltip with HTML
 </button>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md
index 6812476bc..99bea20bf 100644
--- a/pages/_docs/typography.md
+++ b/pages/_docs/typography.md
@@ -7,21 +7,23 @@ bootstrap-link: content/typography/
 
 ### Headings
 
-{% example %}
+{% capture code %}
 {% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Paragraphs
 
-{% example %}
+{% 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>
 <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Semantic text elements
 
-{% example %}
+{% capture code %}
 <abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
 <strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
 <cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
@@ -39,17 +41,19 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
 <time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
 <u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
 <var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Horizontal rules
 
-{% example %}
+{% capture code %}
 <hr> 
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 #### Horizontal rules with label
 
-{% example %}
+{% 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>
@@ -71,12 +75,13 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
 <p>
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 </p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 
 ### Optimized for Asian, African, and Middle Eastern alphabets
 
-{% example %}
+{% capture code %}
 <h5>Chinese</h5>
 <p>汉字</p>
 
@@ -106,38 +111,42 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
 
 <h5>Thai</h5>
 <p>อักษรไทย</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Text transform
 
 Transform text in components with text capitalization classes.
 
-{% example %}
+{% capture code %}
 <p class="text-lowercase">Lowercased text.</p>
 <p class="text-uppercase">Uppercased text.</p>
 <p class="text-capitalize">Capitalized text.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Letter spacing
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
-{% example %}
+{% capture code %}
 <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
 <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Line Height
 
 Utilities for controlling the leading (line height) of an element.
 
-{% example %}
+{% capture code %}
 <p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="lh-sm">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="lh-base">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="lh-lg">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### Antialiasing
 
@@ -145,16 +154,17 @@ Utilities for controlling the font smoothing of an element.
 
 Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
 
-{% example %}
+{% capture code %}
 <div class="antialiased">Text with antialiasing</div>
 <div class="subpixel-antialiased">Text without antialiasing</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
 
 ### 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.
 
-{% example %}
+{% capture code %}
 <div class="markdown">
    <h1>Hello World</h1>
    <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
@@ -167,4 +177,5 @@ When you can't use the CSS classes you want, or when you just want to directly u
       <li>Ut non enim metus.</li>
    </ul>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html
index 280f4c92c..a075e7c2d 100644
--- a/pages/_includes/cards/invoices.html
+++ b/pages/_includes/cards/invoices.html
@@ -28,12 +28,12 @@
 			<tr>
 				<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
 				<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
-				<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-				<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-				<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-				<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-				<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-				<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>Invoice Subject {% include ui/icon.html icon="code" %}</th>
+				<th>Client {% include ui/icon.html icon="code" %}</th>
+				<th>VAT No. {% include ui/icon.html icon="code" %}</th>
+				<th>Created {% include ui/icon.html icon="code" %}</th>
+				<th>Status {% include ui/icon.html icon="code" %}</th>
+				<th>Price {% include ui/icon.html icon="code" %}</th>
 				<th></th>
 			</tr>
 			</thead>
diff --git a/pages/_includes/example.html b/pages/_includes/example.html
new file mode 100644
index 000000000..ab33f069a
--- /dev/null
+++ b/pages/_includes/example.html
@@ -0,0 +1,20 @@
+<div class="example{% if include.centered %} example-centered{% endif %}">
+	<div class="example-content">
+		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
+
+		{{ code }}
+
+		{% if include.wrapper %}</div>{% endif %}
+	</div>
+</div>
+
+{% assign code = code | strip %}
+{% capture new_line %}
+{% endcapture %}
+{% assign code = code | replace_regex: "\n\n+", new_line %}
+{% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
+
+<div class="example-code">
+	{% highlight html %}{{ code }}{% endhighlight %}
+</div>
+
diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html
index c0b8a5706..fda6e25bd 100644
--- a/pages/_includes/ui/button.html
+++ b/pages/_includes/ui/button.html
@@ -28,4 +28,4 @@
 {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
 {% endunless %}
 </{{ e }}>
-{% endremoveemptylines %}
+{% endremoveemptylines %}
\ No newline at end of file
diff --git a/pages/_includes/ui/icon.html b/pages/_includes/ui/icon.html
index 835f3c5bb..5a818b9bf 100644
--- a/pages/_includes/ui/icon.html
+++ b/pages/_includes/ui/icon.html
@@ -20,9 +20,5 @@
 
 {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
 
-{% if 1 == 2 %}
-<!-- SVG icon -->
-{% else %}
 {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
-{% endif %}
 {% endremoveemptylines %}
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
deleted file mode 100644
index 02a372dc4..000000000
--- a/pages/_plugins/jekyll-example.rb
+++ /dev/null
@@ -1,98 +0,0 @@
-require 'htmlbeautifier'
-
-def render_rouge(code, lang, dark = false)
-  require 'rouge'
-
-  formatter = Rouge::Formatters::HTML.new()
-  lexer = Rouge::Lexer.find_fancy(lang, code) || Rouge::Lexers::PlainText
-
-  code = HtmlBeautifier.beautify(code, indent: "\t")
-
-  code = code.gsub(/<hide>.*?<\/hide>/, "")
-  code = formatter.format(lexer.lex(code))
-  code = code.strip.gsub /^[\t\s]*$\n/, ''
-  code = code.gsub /\t/, "\s\s\s"
-  code = code.gsub "#", "#"
-  code = code.gsub "../", "./"
-
-  "<pre>#{code}</pre>"
-end
-
-def add_code_tag(code, lang)
-  code = code.sub(/<pre>\n*/, '<div class="example-code language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '"><pre class="highlight"><code>')
-  code = code.sub(/\n*<\/pre>/, "</code></pre></div>")
-
-  code.strip
-end
-
-module Jekyll
-  class ExampleBlock < Liquid::Block
-    include Liquid::StandardFilters
-
-    SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"(\w|[0-9_-]|\s)+"))?)*)$/
-
-    def initialize(tag_name, markup, tokens)
-      super
-      if markup.strip == ""
-        markup = 'html'
-      end
-
-      if markup.strip =~ SYNTAX
-        @lang = $1.downcase
-        @options = {}
-        if defined?($2) && $2 != ''
-          # Split along 3 possible forms -- key="<quoted list>", key=value, or key
-          $2.scan(/(?:[\w-]+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
-            key, value = opt.split('=')
-            # If a quoted list, convert to array
-            if value && value.include?("\"")
-              value.gsub!(/"/, "")
-            end
-            @options[key.to_sym] = value || true
-          end
-        end
-        @options[:linenos] = false
-      else
-        raise SyntaxError.new <<-eos
-Syntax Error in tag 'example' while parsing the following markup:
-
-  #{markup}
-
-Valid syntax: example <lang> [id=foo]
-        eos
-      end
-    end
-
-    def render(context)
-      prefix = context["highlighter_prefix"] || ""
-      suffix = context["highlighter_suffix"] || ""
-      code = super.to_s.strip
-
-      output = case context.registers[:site].highlighter
-
-               when 'rouge'
-                 render_rouge(code, @lang, @options[:linenos])
-               end
-
-      rendered_output = example(code) + add_code_tag(output, @lang)
-      prefix + rendered_output + suffix
-    end
-
-    def example(output)
-      output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
-
-      '<div class="example' + (@options[:columns] ? ' example-bg' : '') + (@options[:class] ? ' ' + @options[:class] : "") + '"' + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : '') + '><div class="example-content">' + (@options[:columns] ? '<div class="example-column example-column-' + @options[:columns] + '">' : '') + (@options[:wrapper] ? '<div class="' + @options[:wrapper] + '">' : '') + (@options[:"max-width"] ? '<div style="max-width: ' + @options[:"max-width"] + 'px; margin: 0 auto;">' : '') + output + (@options[:wrapper] ? "</div>" : '') + (@options[:columns] ? "</div>" : '') + (@options[:"max-width"] ? '</div>' : '') + '</div></div>'
-    end
-
-  end
-
-  module HightlightFilter
-    def highlight_tidy(code, language = 'html', dark = false)
-      code = render_rouge(code, language, dark)
-      add_code_tag(code, language)
-    end
-  end
-end
-
-Liquid::Template.register_tag('example', Jekyll::ExampleBlock)
-Liquid::Template.register_filter(Jekyll::HightlightFilter)
diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb
index f5dde7566..8b24c7fcd 100644
--- a/pages/_plugins/jekyll-filters.rb
+++ b/pages/_plugins/jekyll-filters.rb
@@ -72,7 +72,7 @@ module Jekyll
 
 
     def replace_regex(input, reg_str, repl_str)
-      re = Regexp.new reg_str
+      re = Regexp.new(reg_str.to_s, Regexp::MULTILINE)
 
       input.gsub re, repl_str
     end
diff --git a/scss/demo/_examples.scss b/scss/demo/_examples.scss
index 7e2e13a90..707c71c86 100644
--- a/scss/demo/_examples.scss
+++ b/scss/demo/_examples.scss
@@ -9,6 +9,14 @@
   align-items: center;
 }
 
+.example-centered {
+  justify-content: center;
+
+  .example-content {
+    flex: 0 auto;
+  }
+}
+
 .example-content {
   font-size: $font-size-base;
   color: $body-color;
diff --git a/scss/demo/_highlight.scss b/scss/demo/_highlight.scss
index e0f42280b..a941905b7 100644
--- a/scss/demo/_highlight.scss
+++ b/scss/demo/_highlight.scss
@@ -22,7 +22,7 @@ pre.highlight,
   .c, .c1 { color: $code-gray; }
   .na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; }
   .s, .dl, .s1, .s2, .mh { color: $code-green; }
-  .mi, .language-js & .nb, .nc, .nd, .nt { color: $code-blue; }
-  .language-html & .nt, .nb { color: $code-red; }
+  .mi, .language-js .nb, .nc, .nd, .nt { color: $code-blue; }
+  .language-html .nt, .nb { color: $code-red; }
   .k, .kd, .nv, .n { color: $code-purple; }
 }