From 5b3e201d06bd36708847b70f8054749432d2a51c Mon Sep 17 00:00:00 2001 From: BG-Software <73077398+BG-Software-BG@users.noreply.github.com> Date: Thu, 8 May 2025 21:53:47 +0200 Subject: [PATCH] Docs fixes: Remove duplicated code examples, fix links, fix filled icons, fix dropdown examples Co-authored-by: ethancrawford --- .changeset/mighty-fans-sell.md | 5 + docs/content/emails/introduction/contents.md | 4 +- .../illustrations/introduction/contents.md | 4 +- .../illustrations/introduction/preview.md | 2 +- docs/content/ui/components/autosize.md | 6 - docs/content/ui/components/avatars.md | 6 - docs/content/ui/components/badges.md | 14 +-- docs/content/ui/components/breadcrumb.md | 17 --- docs/content/ui/components/buttons.md | 2 +- docs/content/ui/components/cards.md | 9 +- docs/content/ui/components/countup.md | 53 -------- docs/content/ui/components/divider.md | 5 +- docs/content/ui/components/dropdowns.md | 25 ++-- docs/content/ui/components/empty.md | 2 + docs/content/ui/components/icons.md | 36 ++---- docs/content/ui/components/offcanvas.md | 11 -- docs/content/ui/components/placeholder.md | 12 -- docs/content/ui/components/progress.md | 42 +------ .../ui/components/segmented-control.md | 13 +- docs/content/ui/components/spinners.md | 25 ---- docs/content/ui/components/statuses.md | 23 ---- docs/content/ui/components/tables.md | 99 --------------- docs/content/ui/components/tabs.md | 2 +- docs/content/ui/components/tracking.md | 117 ------------------ docs/content/ui/forms/form-color-check.md | 19 --- docs/content/ui/forms/form-elements.md | 18 --- docs/content/ui/forms/form-fieldset.md | 11 -- docs/content/ui/forms/form-helpers.md | 12 -- docs/content/ui/forms/form-image-check.md | 20 --- docs/content/ui/forms/form-selectboxes.md | 22 ---- docs/content/ui/forms/form-validation.md | 13 -- docs/content/ui/utilities/vertical-align.md | 44 ++----- 32 files changed, 59 insertions(+), 634 deletions(-) create mode 100644 .changeset/mighty-fans-sell.md diff --git a/.changeset/mighty-fans-sell.md b/.changeset/mighty-fans-sell.md new file mode 100644 index 000000000..b426002fc --- /dev/null +++ b/.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 diff --git a/docs/content/emails/introduction/contents.md b/docs/content/emails/introduction/contents.md index bf7d35747..d026a7805 100644 --- a/docs/content/emails/introduction/contents.md +++ b/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. \ No newline at end of file +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)**. \ No newline at end of file diff --git a/docs/content/illustrations/introduction/contents.md b/docs/content/illustrations/introduction/contents.md index a4611b0b8..916efb4ce 100644 --- a/docs/content/illustrations/introduction/contents.md +++ b/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. \ No newline at end of file +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)**. \ No newline at end of file diff --git a/docs/content/illustrations/introduction/preview.md b/docs/content/illustrations/introduction/preview.md index b8ad1d6fb..23e9b18e9 100644 --- a/docs/content/illustrations/introduction/preview.md +++ b/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 %}
diff --git a/docs/content/ui/components/autosize.md b/docs/content/ui/components/autosize.md index 6df506fe3..51c31b0e6 100644 --- a/docs/content/ui/components/autosize.md +++ b/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 - -``` - -Look at the example below to see how the autosize element works: - {% capture html -%} diff --git a/docs/content/ui/components/avatars.md b/docs/content/ui/components/avatars.md index d443e39a4..37f0f8a71 100644 --- a/docs/content/ui/components/avatars.md +++ b/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 - - {% include "ui/icon.html" icon="user" %} - -``` - ## Avatar initials color Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details. diff --git a/docs/content/ui/components/badges.md b/docs/content/ui/components/badges.md index 83fe715ad..e1c267f5d 100644 --- a/docs/content/ui/components/badges.md +++ b/docs/content/ui/components/badges.md @@ -99,18 +99,12 @@ Place the badge within an `` 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. - -``` - -``` - -The results can be seen in the example below. +Badges can be used as part of links or buttons to provide, for example, a counter. {% capture html -%} - + diff --git a/docs/content/ui/components/breadcrumb.md b/docs/content/ui/components/breadcrumb.md index c2480ed93..d22d1a9ed 100644 --- a/docs/content/ui/components/breadcrumb.md +++ b/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 -
    -
  1. - ... -
    2. -
  2. - ... -
    3. -
-``` - 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 -
    - ... -
-``` - This example shows how to use different breadcrumb styles. {% capture html -%} diff --git a/docs/content/ui/components/buttons.md b/docs/content/ui/components/buttons.md index 96a0091da..c91938334 100644 --- a/docs/content/ui/components/buttons.md +++ b/docs/content/ui/components/buttons.md @@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
{%- endcapture -%} -{%- include "docs/example.html" html=html centered hide-code -%} +{%- include "docs/example.html" html=html centered hide-code height="260px" -%} ```html
diff --git a/docs/content/ui/components/cards.md b/docs/content/ui/components/cards.md index e7e260c08..371541412 100644 --- a/docs/content/ui/components/cards.md +++ b/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 -
...
-
...
-
...
-
...
-``` - ## 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 -%}
diff --git a/docs/content/ui/components/countup.md b/docs/content/ui/components/countup.md index 7886c821e..c661f2846 100644 --- a/docs/content/ui/components/countup.md +++ b/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 -

30000

-``` - -Look at the example below to see how the duration affects the animation. - {% capture html -%}

30000

30000

@@ -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 -

30000

-``` - 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 -

3.123

-``` - -Look at the example below to see how the number of decimal places affects the animation. - {% capture html -%}

3.123

3.123

@@ -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 -

30000

-``` - -Look at the example below to see how easing affects the animation. - {% capture html -%}

30000

30000

@@ -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 -

30000

-``` - -Example below shows how grouping affects the animation. - {% capture html -%}

30000

30000

@@ -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 -

3000000

-``` - -This example shows how the separator affects the animation. - {% capture html -%}

3000000

3000000

@@ -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 -

3.12

-``` - -Look at the example below to see how the decimal separator affects the animation. - {% capture html -%}

3.12

3.12

@@ -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 -

30000

-``` - -Look at the example below to see how the prefix affects the animation. - {% capture html -%}

30000

30000

@@ -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 -

300

-``` - -Look at the example below to see how the suffix affects the animation. - {% capture html -%}

300

300

diff --git a/docs/content/ui/components/divider.md b/docs/content/ui/components/divider.md index 8a9782fe1..fcc11475f 100644 --- a/docs/content/ui/components/divider.md +++ b/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 -%}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

@@ -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!

-``` +{%- endcapture %} +{% include "docs/example.html" html=html %} ## Text position diff --git a/docs/content/ui/components/dropdowns.md b/docs/content/ui/components/dropdowns.md index 8acf71e74..0fcf0568d 100644 --- a/docs/content/ui/components/dropdowns.md +++ b/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
{%- 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. {%- 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 {%- 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 {%- 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 {%- 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 {%- 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. {%- 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 {%- 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 {%- 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. {%- 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 How do you know she is a witch?
- 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.
@@ -310,4 +309,4 @@ Use a dropdown with card content to make it easy for users to get more informati
{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html height="520px" %} diff --git a/docs/content/ui/components/empty.md b/docs/content/ui/components/empty.md index 60e485d2f..879420c0c 100644 --- a/docs/content/ui/components/empty.md +++ b/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 -%}
diff --git a/docs/content/ui/components/icons.md b/docs/content/ui/components/icons.md index ad8713ca0..5ec673e35 100644 --- a/docs/content/ui/components/icons.md +++ b/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 - {% include "ui/icon.html" icon="heart" %} + ``` @@ -57,10 +51,10 @@ Look at the example below to see how the color of the icon changes. {% capture html -%} - {% include "ui/icon.html" icon="heart-filled" %} + {% include "ui/icon.html" icon="heart" type="filled" %} - {% include "ui/icon.html" icon="star-filled" %} + {% include "ui/icon.html" icon="star" type="filled" %} {% 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 -%} -
- Content for the offcanvas goes here. You can place just about any Tabler component or custom - elements here. -
-
-``` - -Look at the example below to see how the offcanvas works. - {% capture html -%}
-``` - -Look at the example below to see how the avatar placeholder looks. - {% capture html -%}
@@ -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 - -``` - -Look at the example below to see how the color affects the placeholder. - {% capture html -%} diff --git a/docs/content/ui/components/progress.md b/docs/content/ui/components/progress.md index 0ab9513c8..1e20cf58e 100644 --- a/docs/content/ui/components/progress.md +++ b/docs/content/ui/components/progress.md @@ -16,22 +16,6 @@ To create a default progress bar, add a `.progress` class to a `
` element. {%- endcapture %} {% include "docs/example.html" html=html %} -```html -
-
- -
-
-``` - ## 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 `` element. It is a great way to create a progress bar without the need for additional HTML elements. - -```html - -``` - -This is how it looks: +You can also use the native HTML5 `` 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 -%} @@ -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 -
-
-
-``` - -This is how it looks: - {% capture html -%}
@@ -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 -
-
-
-
-
Poland
-
65%
-
-``` - Thanks to this you can create a nice looking statistics section: {% capture html -%} diff --git a/docs/content/ui/components/segmented-control.md b/docs/content/ui/components/segmented-control.md index 08045620f..756d5adf4 100644 --- a/docs/content/ui/components/segmented-control.md +++ b/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 - -``` - -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 -%}
{%- endcapture %} {% include "docs/example.html" html=html %} - -```html -
-
-
-
Status monitoring
-
-
- -
- Current month - Last month - Last 3 months -
-
-
-
-
-
99.5%
-
- - 2% - - - - - - -
-
-
-
-
-
-
-
-
-
- ... -
-
-
-
-``` diff --git a/docs/content/ui/forms/form-color-check.md b/docs/content/ui/forms/form-color-check.md index 9ffa71bc7..f6ecd416c 100644 --- a/docs/content/ui/forms/form-color-check.md +++ b/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 -%}
@@ -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 - -``` - ## Input color picker Add an color picker to your form to let users customize it according to their preferences. -```html - -``` - -There is also an example of a color picker input: - {% capture html -%}
diff --git a/docs/content/ui/forms/form-elements.md b/docs/content/ui/forms/form-elements.md index c72406ded..c84007edb 100644 --- a/docs/content/ui/forms/form-elements.md +++ b/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 -
- - -
- - - {% include "ui/icon.html" icon="search" %} - -
-
-``` - ## Form control flush You can remove borders from your form control by adding the `form-control-flush` class. diff --git a/docs/content/ui/forms/form-fieldset.md b/docs/content/ui/forms/form-fieldset.md index 17a4a9596..7266a88fb 100644 --- a/docs/content/ui/forms/form-fieldset.md +++ b/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 {%- endcapture %} {% include "docs/example.html" html=html %} - -```html -
- ... -
- - -
- ... -
-``` diff --git a/docs/content/ui/forms/form-helpers.md b/docs/content/ui/forms/form-helpers.md index cff5e64f3..d470d25e2 100644 --- a/docs/content/ui/forms/form-helpers.md +++ b/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 - -``` - -Look at the example below to see how the required field works: - {% capture html -%}
@@ -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 - -``` - -This example shows how to use the additional info inside the label: - {% capture html -%}
diff --git a/docs/content/ui/forms/form-image-check.md b/docs/content/ui/forms/form-image-check.md index 11b827285..ca7b217ba 100644 --- a/docs/content/ui/forms/form-image-check.md +++ b/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 - -``` - ## 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
{%- endcapture %} {% include "docs/example.html" html=html %} - -```html - -``` diff --git a/docs/content/ui/forms/form-selectboxes.md b/docs/content/ui/forms/form-selectboxes.md index d2db358b5..d244cfed6 100644 --- a/docs/content/ui/forms/form-selectboxes.md +++ b/docs/content/ui/forms/form-selectboxes.md @@ -380,25 +380,3 @@ Use more advanced selectboxes to display the range of available options. You can
{%- endcapture %} {% include "docs/example.html" html=html column %} - -```html - -``` - diff --git a/docs/content/ui/forms/form-validation.md b/docs/content/ui/forms/form-validation.md index 3f1fa1855..e34d0de7a 100644 --- a/docs/content/ui/forms/form-validation.md +++ b/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 - -
Looks good!
-``` - -This is how it works in the example below: - {% capture html -%}
@@ -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 - -``` - -Look how it works in the example below: - {% capture html -%} diff --git a/docs/content/ui/utilities/vertical-align.md b/docs/content/ui/utilities/vertical-align.md index f3d842c46..f53461571 100644 --- a/docs/content/ui/utilities/vertical-align.md +++ b/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 -baseline -top -middle -bottom -text-top -text-bottom -``` - {% capture html -%}
baseline @@ -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 - +{% capture html -%} +
- - - - - - + + + + + +
baselinetopmiddlebottomtext-toptext-bottombaselinetopmiddlebottomtext-toptext-bottom
-``` - -```html example - - - - - - - - - - - -
baselinetopmiddlebottomtext-toptext-bottom
-``` \ No newline at end of file +{%- endcapture %} +{% include "docs/example.html" html=html %} \ No newline at end of file