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