Docs fixes: Remove duplicated code examples, fix links, fix filled icons, fix dropdown examples

Co-authored-by: ethancrawford <[email protected]>

.changeset/mighty-fans-sell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links

docs/content/emails/introduction/contents.md

@@ -60,4 +60,6 @@ It contains 4 subfolders with images used across the different email templates:
 This file contains the license information for the Tabler Emails package.
 
 ### 4. Readme: `readme.html`
-This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
+This file contains the main information about the Tabler Emails package, including a brief description and instructions on how to use it.
+
+Do you like our templates? **Find out more and purchase on [our website]({{ site.homepage }}/emails)**.

docs/content/illustrations/introduction/contents.md

@@ -74,4 +74,6 @@ This folder contains SVG files using CSS variables for flexible theming.
 - `dark/`: Dark-themed illustrations.
 - `light/`: Light-themed illustrations.
 
-This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
+
+**Find out more and purchase Tabler Illustrations at [our website]({{ site.homepage }}/illustrations)**.

docs/content/illustrations/introduction/preview.md

@@ -3,7 +3,7 @@ title: Preview
 summary: "Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively."
 ---
 
-Look at full list of illustrations below and see how they look.
+Look at full list of illustrations below and see how they look. Find out more and purchase Tabler Illustrations at [our website]({{ site.homepage }}/illustrations).
 
 {% assign all-illustrations = illustrations | sort %}
 <div class="row g-2 gy-6">

docs/content/ui/components/autosize.md

@@ -13,12 +13,6 @@ Add the autosize element to your input to make it automatically adjust to the le
 
 To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
 
-```html
-<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
-```
-
-Look at the example below to see how the autosize element works:
-
 {% capture html -%}
 <label class="form-label">Autosize example</label>
 <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>

docs/content/ui/components/avatars.md

@@ -56,12 +56,6 @@ Besides pictures and initials, you can also use icons to make the avatars more u
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
-```html
-<span class="avatar">
-  {% include "ui/icon.html" icon="user" %}
-</span>
-```
-
 ## Avatar initials color
 
 Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.

docs/content/ui/components/badges.md

@@ -99,18 +99,12 @@ Place the badge within an `<a>` element if you want it to perform the function o
 
 ## Button with badge
 
-Badges can be used as part of links or buttons to provide a counter.
+Badges can be used as part of links or buttons to provide, for example, a counter.
 
-```
+{% capture html -%}
 <button type="button" class="btn">
-  Notifications <span class="badge bg-red-lt ms-2">4</span>
+	Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
-```
-
-The results can be seen in the example below.
-
-{% capture html -%}
-<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span></button>
 <button type="button" class="btn">
   Notifications <span class="badge bg-green-lt ms-2">4</span>
 </button>

docs/content/ui/components/breadcrumb.md

@@ -9,17 +9,6 @@ description: Navigation aid for better structure.
 
 Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
 
-```html
-<ol class="breadcrumb">
-  <li class="breadcrumb-item">
-    <a href="#">...</a>
-  </li>
-  <li class="breadcrumb-item active">
-    <a href="#">...</a>
-  </li>
-</ol>
-```
-
 Look at the example below to see how breadcrumbs work in practice.
 
 {% capture html -%}
@@ -41,12 +30,6 @@ Look at the example below to see how breadcrumbs work in practice.
 
 You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
 
-```html
-<ol class="breadcrumb breadcrumb-dots">
-  ...
-</ol>
-```
-
 This example shows how to use different breadcrumb styles.
 
 {% capture html -%}

docs/content/ui/components/buttons.md

@@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
   </div>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered hide-code -%}
+{%- include "docs/example.html" html=html centered hide-code height="260px" -%}
 
 ```html
 <div class="dropdown">

docs/content/ui/components/cards.md

@@ -40,13 +40,6 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
 {%- endcapture %}
 {% include "docs/example.html" html=html bg="surface-secondary" column %}
 
-```html
-<div class="card card-sm">...</div>
-<div class="card">...</div>
-<div class="card card-md">...</div>
-<div class="card card-lg">...</div>
-```
-
 ## Card with title
 
 Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
@@ -198,7 +191,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
 
 ## Color variations
 
-Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching.
+Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching. Use `card-status-*` and `bg-*` classes to change the placement and color of the status border.
 
 {% capture html -%}
 <div class="row row-deck">

docs/content/ui/components/countup.md

@@ -30,12 +30,6 @@ The results can be seen in the example below.
 
 Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
 
-```html
-<h1 data-countup='{"duration":4}'>30000</h1>
-```
-
-Look at the example below to see how the duration affects the animation.
-
 {% capture html -%}
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"duration":4}'>30000</h1>
@@ -47,11 +41,6 @@ Look at the example below to see how the duration affects the animation.
 
 By default the countup will start from zero. If you want to set a different start value use `startVal`.
 You can also set the start value to be greater than the final value, so that it counts down instead of up.
-
-```html
-<h1 data-countup='{"startVal":12345}'>30000</h1>
-```
-
 To see how the starting value affects the animation, look at the example below.
 
 {% capture html -%}
@@ -64,12 +53,6 @@ To see how the starting value affects the animation, look at the example below.
 
 Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
 
-```html
-<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
-```
-
-Look at the example below to see how the number of decimal places affects the animation.
-
 {% capture html -%}
 <h1 data-countup>3.123</h1>
 <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
@@ -82,12 +65,6 @@ Look at the example below to see how the number of decimal places affects the an
 
 Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
 
-```html
-<h1 data-countup='{"useEasing": false}'>30000</h1>
-```
-
-Look at the example below to see how easing affects the animation.
-
 {% capture html -%}
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useEasing": false}'>30000</h1>
@@ -98,12 +75,6 @@ Look at the example below to see how easing affects the animation.
 
 Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
 
-```html
-<h1 data-countup='{"useGrouping": false}'>30000</h1>
-```
-
-Example below shows how grouping affects the animation.
-
 {% capture html -%}
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useGrouping": false}'>30000</h1>
@@ -114,12 +85,6 @@ Example below shows how grouping affects the animation.
 
 You can change the default separator using `separator` and specifying the one you wish to use.
 
-```html
-<h1 data-countup='{"separator":" "}'>3000000</h1>
-```
-
-This example shows how the separator affects the animation.
-
 {% capture html -%}
 <h1 data-countup>3000000</h1>
 <h1 data-countup='{"separator":" "}'>3000000</h1>
@@ -130,12 +95,6 @@ This example shows how the separator affects the animation.
 
 You can change the default decimal separator using `decimal` and specifying the one you wish to use.
 
-```html
-<h1 data-countup='{"decimal":","}'>3.12</h1>
-```
-
-Look at the example below to see how the decimal separator affects the animation.
-
 {% capture html -%}
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
 <h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
@@ -146,12 +105,6 @@ Look at the example below to see how the decimal separator affects the animation
 
 Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
 
-```html
-<h1 data-countup='{"prefix":"$"}'>30000</h1>
-```
-
-Look at the example below to see how the prefix affects the animation.
-
 {% capture html -%}
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
 <h1 data-countup='{"prefix":"€"}'>30000</h1>
@@ -162,12 +115,6 @@ Look at the example below to see how the prefix affects the animation.
 
 Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
 
-```html
-<h1 data-countup='{"suffix":"%"}'>300</h1>
-```
-
-Look at the example below to see how the suffix affects the animation.
-
 {% capture html -%}
 <h1 data-countup='{"suffix":"%"}'>300</h1>
 <h1 data-countup='{"suffix":"‰"}'>300</h1>

docs/content/ui/components/divider.md

@@ -8,7 +8,7 @@ description: Separate content with clear dividers.
 
 Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
 
-```html example
+{% capture html -%}
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -17,7 +17,8 @@ Use dividers to visually separate content into parts. You can use a line only or
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
   rerum, saepe sed, sit!
 </p>
-```
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
 
 ## Text position
 

docs/content/ui/components/dropdowns.md

@@ -19,7 +19,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="220px" %}
 
 ## Dropdown divider
 
@@ -36,7 +36,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="240px" %}
 
 ## Active state
 
@@ -52,7 +52,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="220px" %}
 
 ## Disabled state
 
@@ -68,7 +68,7 @@ Make a dropdown item look disabled to display options which are currently not av
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="220px" %}
 
 ## Dropdown header
 
@@ -84,7 +84,7 @@ Add a dropdown header to group dropdown items into sections and name them accord
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="210px" %}
 
 ## Dropdown with icons
 
@@ -138,7 +138,7 @@ Use icons in your dropdowns to add more visual content and make the options easy
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="210px" %}
 
 ## Dropdown with arrow
 
@@ -153,7 +153,7 @@ Add an arrow that points at the dropdown button.
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="190px" %}
 
 ## Dropdown with badge
 
@@ -174,7 +174,7 @@ Add a badge to your dropdown items to show additional information related to an
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="190px" %}
 
 ## Dropdown with checkboxes
 
@@ -196,7 +196,7 @@ Use dropdowns with checkboxes to allow users to select options from a predefined
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="220px" %}
 
 ## Dark dropdown
 
@@ -251,7 +251,7 @@ Make your dropdown suit the dark mode of your website or software.
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="220px" %}
 
 ## Dropdown with card content
 
@@ -274,8 +274,7 @@ Use a dropdown with card content to make it easy for users to get more informati
           <a href="#">How do you know she is a witch?</a>
         </h3>
         <div class="text-secondary">
-          Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a
-          wart. You ...
+          Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit.
         </div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/static/avatars/013m.jpg)"></span>
@@ -310,4 +309,4 @@ Use a dropdown with card content to make it easy for users to get more informati
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html height="520px" %}

docs/content/ui/components/empty.md

@@ -63,6 +63,8 @@ Use the default empty state to engage users in the critical moments of their exp
 
 Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
 
+Do you need an illustration to enhance your web designs? We've got something for you! Check out our premium SVG [illustrations]({{ site.homepage }}/illustrations).
+
 {% capture html -%}
 <div class="empty">
   <div class="empty-img">

docs/content/ui/components/icons.md

@@ -5,7 +5,7 @@ banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
-If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
+If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
 
 ## Base icon
 
@@ -27,29 +27,23 @@ Results can be seen in the example below.
 
 ## Filled icons
 
-To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
-
-```html
-{% include "ui/icon.html" icon="heart-filled" %}
-```
-
-Look at the example below to see the filled icons.
+To use filled icons, you need to copy the SVG code of the selected filled Icon from the [Tabler Icons website]({{ site.icons.link }}) and paste it into your HTML file.
 
 {% capture html -%}
-{% include "ui/icon.html" icon="heart-filled" %}
-{% include "ui/icon.html" icon="bell-ringing-filled" %}
-{% include "ui/icon.html" icon="cherry-filled" %}
-{% include "ui/icon.html" icon="circle-key-filled" %}
+{% include "ui/icon.html" icon="heart" type="filled" %}
+{% include "ui/icon.html" icon="bell-ringing" type="filled" %}
+{% include "ui/icon.html" icon="cherry" type="filled" %}
+{% include "ui/icon.html" icon="circle-key" type="filled" %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
 ## Icon colors
 
-To change the color of the icon, you need to add the `text-` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
+To change the color of the icon, you need to add the `text-*` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
 
 ```html
 <span class="text-red">
-  {% include "ui/icon.html" icon="heart" %}
+  <!-- Icon code here -->
 </span>
 ```
 
@@ -57,10 +51,10 @@ Look at the example below to see how the color of the icon changes.
 
 {% capture html -%}
 <span class="text-red">
-  {% include "ui/icon.html" icon="heart-filled" %}
+  {% include "ui/icon.html" icon="heart" type="filled" %}
 </span>
 <span class="text-yellow">
-  {% include "ui/icon.html" icon="star-filled" %}
+  {% include "ui/icon.html" icon="star" type="filled" %}
 </span>
 <span class="text-blue">
   {% include "ui/icon.html" icon="circle" %}
@@ -73,15 +67,7 @@ Look at the example below to see how the color of the icon changes.
 
 ## Icon animations
 
-To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
-
-```html
-{% include "ui/icon.html" icon="heart" %}
-{% include "ui/icon.html" icon="bell" %}
-{% include "ui/icon.html" icon="rotate-clockwise" %}
-```
-
-Look at the example below to see the animated icons.
+To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.
 
 {% capture html -%}
 <svg

docs/content/ui/components/offcanvas.md

@@ -8,17 +8,6 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 
 To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
 
-```html
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
-  <div class="offcanvas-body">
-    Content for the offcanvas goes here. You can place just about any Tabler component or custom
-    elements here.
-  </div>
-</div>
-```
-
-Look at the example below to see how the offcanvas works.
-
 {% capture html -%}
 <div
   class="offcanvas offcanvas-start show"

docs/content/ui/components/placeholder.md

@@ -57,12 +57,6 @@ A placeholder can also contain an element that looks like a header:
 
 You can use a placeholder that will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html
-<div class="avatar placeholder"></div>
-```
-
-Look at the example below to see how the avatar placeholder looks.
-
 {% capture html -%}
 <div class="row">
   <div class="col-auto">
@@ -111,12 +105,6 @@ You can use a placeholder that will look like a picture. You can use the `ratio`
 
 By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html
-<span class="placeholder col-12 bg-dark"></span>
-```
-
-Look at the example below to see how the color affects the placeholder.
-
 {% capture html -%}
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>

docs/content/ui/components/progress.md

@@ -16,22 +16,6 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<div class="progress">
-  <div
-    class="progress-bar"
-    style="width: 38%"
-    role="progressbar"
-    aria-valuenow="38"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="38% Complete"
-  >
-    <span class="visually-hidden">38% Complete</span>
-  </div>
-</div>
-```
-
 ## Progress size
 
 Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
@@ -72,13 +56,7 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
 
 ## Native progress element
 
-You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
-
-```html
-<progress class="progress progress-sm" value="15" max="100" />
-```
-
-This is how it looks:
+You can also use the native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:
 
 {% capture html -%}
 <progress class="progress progress-sm" value="15" max="100" />
@@ -178,14 +156,6 @@ This is how it looks:
 
 You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
 
-```html
-<div class="progress">
-  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
-</div>
-```
-
-This is how it looks:
-
 {% capture html -%}
 <div class="progress">
   <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
@@ -197,16 +167,6 @@ This is how it looks:
 
 By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
 
-```html
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
-  </div>
-  <div class="progressbg-text">Poland</div>
-  <div class="progressbg-value">65%</div>
-</div>
-```
-
 Thanks to this you can create a nice looking statistics section:
 
 {% capture html -%}

docs/content/ui/components/segmented-control.md

@@ -3,18 +3,7 @@ title: Segmented Control
 summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
 ---
 
-To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links. 
-
-```html
-<nav class="nav nav-segmented" role="tablist">
-  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
-    First
-  </button>
-  ...
-</nav>
-```
-
-See the example below to see how the segmented control looks.
+To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
 
 {% capture html -%}
 <nav class="nav nav-segmented" role="tablist">

docs/content/ui/components/spinners.md

@@ -9,12 +9,6 @@ description: Indicate loading state with spinners.
 
 Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
 
-```html
-<div class="spinner-border"></div>
-```
-
-Look at the example below to see how the spinner works:
-
 {% capture html -%}
 <div class="spinner-border"></div>
 {%- endcapture %}
@@ -41,11 +35,6 @@ Choose one of the available colors to customize the spinner and make it suit you
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
-```html
-<div class="spinner-border text-blue" role="status"></div>
-<div class="spinner-border text-red" role="status"></div>
-```
-
 ## Size
 
 Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
@@ -83,24 +72,10 @@ Growing spinners also come in a variety of colors to choose from.
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
-```html
-<div class="spinner-grow text-blue" role="status"></div>
-<div class="spinner-grow text-azure" role="status"></div>
-```
-
 ## Button with spinner
 
 Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
 
-```html
-<a href="#" class="btn btn-primary">
-  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
-  Button
-</a>
-```
-
-Look at the example below to see how the button with a spinner works:
-
 {% capture html -%}
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>

docs/content/ui/components/statuses.md

@@ -8,14 +8,6 @@ description: Highlight interface elements with status dots.
 
 Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
 
-```html
-<span class="status status-blue">Blue</span>
-<span class="status status-azure">Azure</span>
-...
-```
-
-Look at the example below to see how the status works:
-
 {% capture html -%}
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
@@ -37,15 +29,6 @@ Look at the example below to see how the status works:
 
 You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element.
 
-```html
-<span class="status status-blue">
-  <span class="status-dot"></span>
-  Blue
-</span>
-```
-
-Look at the example below to see how the status with a dot works:
-
 {% capture html -%}
 <span class="status status-blue">
   <span class="status-dot"></span>
@@ -214,12 +197,6 @@ Use the lite status to make the status less noticeable. To do this, add a `.stat
 
 If you need only dot status, you can use the `.status-dot` class.
 
-```html
-<span class="status-dot status-blue"></span>
-```
-
-Look at the example below to see how the status dots work:
-
 {% capture html -%}
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>

docs/content/ui/components/tables.md

@@ -178,105 +178,6 @@ If you don't want the table cell content to wrap to another line, use the `table
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<div class="table-responsive">
-  <table class="table table-vcenter table-nowrap">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Title</th>
-        <th>Email</th>
-        <th>Role</th>
-        <th></th>
-        <th class="w-1"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Paweł Kuna</td>
-        <td class="text-secondary">UI Designer, Training</td>
-        <td class="text-secondary">
-          <a href="#" class="text-reset">[email protected]</a>
-        </td>
-        <td class="text-secondary">User</td>
-        <td>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
-          debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
-          perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
-        </td>
-        <td>
-          <a href="#">Edit</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Jeffie Lewzey</td>
-        <td class="text-secondary">Chemical Engineer, Support</td>
-        <td class="text-secondary">
-          <a href="#" class="text-reset">[email protected]</a>
-        </td>
-        <td class="text-secondary">Admin</td>
-        <td>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
-          debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
-          perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
-        </td>
-        <td>
-          <a href="#">Edit</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Mallory Hulme</td>
-        <td class="text-secondary">Geologist IV, Support</td>
-        <td class="text-secondary">
-          <a href="#" class="text-reset">[email protected]</a>
-        </td>
-        <td class="text-secondary">User</td>
-        <td>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
-          debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
-          perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
-        </td>
-        <td>
-          <a href="#">Edit</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Dunn Slane</td>
-        <td class="text-secondary">Research Nurse, Sales</td>
-        <td class="text-secondary">
-          <a href="#" class="text-reset">[email protected]</a>
-        </td>
-        <td class="text-secondary">Owner</td>
-        <td>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
-          debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
-          perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
-        </td>
-        <td>
-          <a href="#">Edit</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Emmy Levet</td>
-        <td class="text-secondary">VP Product Management, Accounting</td>
-        <td class="text-secondary">
-          <a href="#" class="text-reset">[email protected]</a>
-        </td>
-        <td class="text-secondary">Admin</td>
-        <td>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
-          debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
-          perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
-        </td>
-        <td>
-          <a href="#">Edit</a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-```
-
 ## Table Variants
 
 {% capture html -%}

docs/content/ui/components/tabs.md

@@ -167,7 +167,7 @@ Use tabs without label names to save space and make the tab content easy to reco
       </li>
       <li class="nav-item ms-auto">
         <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab">
-          {% include "ui/icon.html" icon="setings" %}
+          {% include "ui/icon.html" icon="settings" %}
         </a>
       </li>
     </ul>

docs/content/ui/components/tracking.md

@@ -192,31 +192,6 @@ description: Monitor data activity visually.
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<div class="tracking">
-  ...
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="No data"
-  ></div>
-  <div
-    class="tracking-block bg-failed"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  ...
-</div>
-```
-
 ## Tracking inside a card
 
 You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/img/components/cards).
@@ -456,95 +431,3 @@ You can add a tracking component inside the cards to give your reports a fresh l
 </div>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
-
-```html
-<div class="card">
-  <div class="card-body">
-    <div class="d-flex align-items-center">
-      <div class="subheader">Status monitoring</div>
-      <div class="ms-auto lh-1">
-        <div class="dropdown">
-          <a
-            class="dropdown-toggle text-secondary"
-            href="#"
-            data-bs-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-            >Current month</a
-          >
-          <div class="dropdown-menu dropdown-menu-end">
-            <a class="dropdown-item active" href="#">Current month</a>
-            <a class="dropdown-item" href="#">Last month</a>
-            <a class="dropdown-item" href="#">Last 3 months</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex align-items-baseline">
-      <div class="h1 mb-3 me-2">99.5%</div>
-      <div class="me-auto">
-        <span class="text-green d-inline-flex align-items-center lh-1">
-          2%
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon ms-1"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <polyline points="3 17 9 11 13 15 21 7" />
-            <polyline points="14 7 21 7 21 14" />
-          </svg>
-        </span>
-      </div>
-    </div>
-    <div class="mt-2">
-      <div class="tracking">
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-danger"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Downtime"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-warning"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Big load"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-```

docs/content/ui/forms/form-color-check.md

@@ -98,7 +98,6 @@ There is also an example of a color input:
 
 If you need to select only one color, you can use the radio input type:
 
-
 {% capture html -%}
 <div class="mb-3">
   <label class="form-label">Color Input</label>
@@ -186,28 +185,10 @@ If you need to select only one color, you can use the radio input type:
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<label class="form-colorinput">
-  <input name="..." type="radio" value="..." class="form-colorinput-input" />
-  <span class="form-colorinput-color bg-dark rounded-circle"></span>
-</label>
-```
-
 ## Input color picker
 
 Add an color picker to your form to let users customize it according to their preferences.
 
-```html
-<input
-  type="color"
-  class="form-control form-control-color"
-  value="#066fd1"
-  title="Choose your color"
-/>
-```
-
-There is also an example of a color picker input:
-
 {% capture html -%}
 <div class="mb-3">
   <label class="form-label">Color picker</label>

docs/content/ui/forms/form-elements.md

@@ -97,24 +97,6 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<div class="mb-3">
-  <label class="form-label">Form control rounded</label>
-  <input
-    type="text"
-    class="form-control form-control-rounded mb-2"
-    name="Form control rounded"
-    placeholder="Text.."
-  />
-  <div class="input-icon">
-    <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
-    <span class="input-icon-addon">
-      {% include "ui/icon.html" icon="search" %}
-    </span>
-  </div>
-</div>
-```
-
 ## Form control flush
 
 You can remove borders from your form control by adding the `form-control-flush` class.

docs/content/ui/forms/form-fieldset.md

@@ -33,14 +33,3 @@ Group parts of your form to make it well-structured and clearer for users, using
 </fieldset>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
-
-```html
-<fieldset class="form-fieldset">
-  ...
-  <div class="mb-3">
-    <label class="form-label required">Company</label>
-    <input type="text" class="form-control" autocomplete="off" />
-  </div>
-  ...
-</fieldset>
-```

docs/content/ui/forms/form-helpers.md

@@ -43,12 +43,6 @@ Look at the example below to see how the input help works:
 
 Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
 
-```html
-<label class="form-label required">Required</label>
-```
-
-Look at the example below to see how the required field works:
-
 {% capture html -%}
 <div>
   <label class="form-label required">Required</label>
@@ -80,12 +74,6 @@ Look at the example below to see how the form hint works:
 
 Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
 
-```html
-<label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>
-```
-
-This example shows how to use the additional info inside the label:
-
 {% capture html -%}
 <div>
   <label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>

docs/content/ui/forms/form-image-check.md

@@ -133,15 +133,6 @@ If you want to use the image check as a radio button, you can change the input t
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<label class="form-imagecheck">
-  <input name="..." type="radio" value="1" class="form-imagecheck-input" />
-  <span class="form-imagecheck-figure">
-    <img src="..." alt="" class="form-imagecheck-image" />
-  </span>
-</label>
-```
-
 ## Avatars
 
 If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
@@ -203,14 +194,3 @@ If you want to use the image check with avatars, you can use an [avatar componen
 </div>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
-
-```html
-<label class="form-imagecheck">
-  <input name="..." type="checkbox" value="..." class="form-imagecheck-input" />
-  <span class="form-imagecheck-figure">
-    <span class="form-imagecheck-image">
-      <span class="avatar avatar-md" style="background-image: url(...)"></span>
-    </span>
-  </span>
-</label>
-```

docs/content/ui/forms/form-selectboxes.md

@@ -380,25 +380,3 @@ Use more advanced selectboxes to display the range of available options. You can
 </div>
 {%- endcapture %}
 {% include "docs/example.html" html=html column %}
-
-```html
-<label class="form-selectgroup-item flex-fill">
-  <input
-    type="radio"
-    name="form-payment"
-    value="mastercard"
-    class="form-selectgroup-input"
-    checked
-  />
-  <div class="form-selectgroup-label d-flex align-items-center p-3">
-    <div class="me-3">
-      <span class="form-selectgroup-check"></span>
-    </div>
-    <div>
-      <span class="payment payment-provider-mastercard payment-xs me-2"></span>
-      ending in <strong>2807</strong>
-    </div>
-  </div>
-</label>
-```
-

docs/content/ui/forms/form-validation.md

@@ -20,13 +20,6 @@ To apply the validation state to the form control, use the `.is-valid` and `.is-
 
 To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
 
-```html
-<input type="text" class="form-control is-valid" placeholder="Valid State..." />
-<div class="valid-feedback">Looks good!</div>
-```
-
-This is how it works in the example below:
-
 {% capture html -%}
 <div>
   <label class="form-label required">City</label>
@@ -53,12 +46,6 @@ If you prefer a more subtle manner of informing users of the input control valid
 
 To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
 
-```html
-<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
-```
-
-Look how it works in the example below:
-
 {% capture html -%}
 <input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
 <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />

docs/content/ui/utilities/vertical-align.md

@@ -10,15 +10,6 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
 
 Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
 
-```html
-<span class="align-baseline">baseline</span>
-<span class="align-top">top</span>
-<span class="align-middle">middle</span>
-<span class="align-bottom">bottom</span>
-<span class="align-text-top">text-top</span>
-<span class="align-text-bottom">text-bottom</span>
-```
-
 {% capture html -%}
 <div>
   <span class="align-baseline">baseline</span>
@@ -35,33 +26,18 @@ Use vertical alignment utilities to align inline-level elements relative to thei
 
 Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
 
-
-```html
-<table>
-  <tbody>
-    <tr>
-      <td class="align-baseline">baseline</td>
-      <td class="align-top">top</td>
-      <td class="align-middle">middle</td>
-      <td class="align-bottom">bottom</td>
-      <td class="align-text-top">text-top</td>
-      <td class="align-text-bottom">text-bottom</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```html example
-<table style="height: 100px">
+{% capture html -%}
+<table style="height: 100px" class="bg-surface">
   <tbody>
     <tr>
-      <td class="align-baseline">baseline</td>
-      <td class="align-top">top</td>
-      <td class="align-middle">middle</td>
-      <td class="align-bottom">bottom</td>
-      <td class="align-text-top">text-top</td>
-      <td class="align-text-bottom">text-bottom</td>
+      <td class="align-baseline border">baseline</td>
+      <td class="align-top border">top</td>
+      <td class="align-middle border">middle</td>
+      <td class="align-bottom border">bottom</td>
+      <td class="align-text-top border">text-top</td>
+      <td class="align-text-bottom border">text-bottom</td>
     </tr>
   </tbody>
 </table>
-```
+{%- endcapture %}
+{% include "docs/example.html" html=html %}