@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/components/cards.mdx

@@ -1,14 +1,15 @@
 ---
 title: Cards
-description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
+summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
 bootstrapLink: components/card/
+description: Organize content with flexible cards.
 ---
 
 ## Default card
 
 Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
 
-```html example code centered columns={1}
+```html example centered columns={1} background="base"
 <div class="card">
   <div class="card-body">
     <p>This is some text within a card body.</p>
@@ -22,7 +23,7 @@ You can change the padding of a newly created card. To do it, use the `.card-sm`
 
 Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
 
-```html example vertical centered separated height={500}
+```html example vertical centered separated height={500} background="base"
 <div class="card card-sm">
   <div class="card-body">
     This is some text within a card body.
@@ -56,7 +57,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
 
 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.
 
-```html code example vertical centered separated height={400}
+```html example vertical centered separated height={400} background="base"
 <div class="card">
   <div class="card-body">
     <h3 class="card-title">Card title</h3>
@@ -77,7 +78,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
 
 To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
 
-```html example centered columns={1} height={500} code
+```html example centered columns={1} height={500} background="base"
 <div class="card">
   <!-- Photo -->
   <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
@@ -93,13 +94,15 @@ To create a more visually appealing card, add a title and an image. Thanks to th
 
 Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
 
-```html example centered columns={1} height={600} code
+```html example centered columns={1} height={600} background="base"
 <div class="card d-flex flex-column">
   <a href="#">
     <img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" />
   </a>
   <div class="card-body d-flex flex-column">
-    <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+    <h3 class="card-title">
+      <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 ...</div>
     <div class="d-flex align-items-center pt-4 mt-auto">
       <span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span>
@@ -123,7 +126,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
 
 Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
 
-```html code example centered height="220px"
+```html example centered height="220px" background="base"
 <div class="row row-deck">
   <div class="col-md-4">
     <div class="card">
@@ -147,7 +150,7 @@ Add the `.row-deck` class to `.row`, if you want to display several cards next t
 
 You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
 
-```html example columns={2} centered height={400} code
+```html example columns={2} centered height={400} background="base"
 <div class="card d-flex flex-column">
   <div class="row row-0 flex-fill">
     <div class="col-md-3">
@@ -157,7 +160,9 @@ You can also add an image on the left side of the card. To do it, add the `.card
     </div>
     <div class="col">
       <div class="card-body">
-        <h3 class="card-title"><a href="#">Shut up!</a></h3>
+        <h3 class="card-title">
+          <a href="#">Shut up!</a>
+        </h3>
         <div class="text-secondary">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span>
@@ -183,7 +188,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
 
 Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="row row-deck">
   <div class="col-md-6">
     <div class="card">
@@ -212,17 +217,17 @@ Add a status color to your card, either at the top or on the side of the card, t
 <div class="card">
   <div class="card-status-top bg-danger"></div>
   <div class="card-body">
-	 <h3 class="card-title">Card with top status</h3>
-	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <h3 class="card-title">Card with top status</h3>
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
 <div class="card">
   <div class="card-status-start bg-green"></div>
   <div class="card-body">
-	 <h3 class="card-title">Card with side status</h3>
-	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <h3 class="card-title">Card with side status</h3>
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
 ```
@@ -231,7 +236,7 @@ Add a status color to your card, either at the top or on the side of the card, t
 
 Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
 
-```html code example columns={1} centered height={300}
+```html example columns={1} centered height={300} background="base"
 <div class="card card-stacked">
   <div class="card-body">
     <h3 class="card-title">Stacked card</h3>
@@ -245,13 +250,21 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
 
 Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="card-tabs">
   <ul class="nav nav-tabs">
-    <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
-    <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
-    <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
-    <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
+    <li class="nav-item">
+      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
+    </li>
   </ul>
   <div class="tab-content">
     <div id="tab-top-1" class="card tab-pane active show">
@@ -295,10 +308,18 @@ Organize multiple cards into tabs to be able to display more content in a well-o
 <div class="card-tabs">
   <!-- Cards navigation -->
   <ul class="nav nav-tabs">
-    <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
-    <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
-    <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
-    <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
+    <li class="nav-item">
+      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
+    </li>
   </ul>
   <div class="tab-content">
     <!-- Content of card #1 -->

package/docs/ui/components/carousel.mdx

@@ -1,14 +1,15 @@
 ---
 title: Carousel
-description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
+summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
 bootstrapLink: components/carousel/
+description: Display visual content with carousels.
 ---
 
 ## Default markup
 
 Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></button>
@@ -49,7 +50,7 @@ Use a carousel to make your website design more visually appealing for users. In
 
 You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-dot">
     <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class="active"></button>
@@ -82,7 +83,7 @@ You can replace the standard indicators with dots. Just add the `carousel-indica
 
 The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
 
-```html example code centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-thumb">
     <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/group-of-people-sightseeing-in-the-city.jpg)"></button>
@@ -115,7 +116,7 @@ The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and
 
 To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
     <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class="active"></button>
@@ -146,7 +147,7 @@ To make the indicators go to the right side, add the `carousel-indicators-vertic
 
 Likewise, you can add thumbnails on the right side:
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
     <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg)"></button>
@@ -179,7 +180,7 @@ Likewise, you can add thumbnails on the right side:
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">

package/docs/ui/components/charts.mdx

@@ -1,7 +1,8 @@
 ---
 title: Charts
 libs: apexcharts
-description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+description: Interactive data visualizations with ApexCharts.
 ---
 
 To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
@@ -12,7 +13,7 @@ See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 Line charts are a typical pictorial representation that depicts trends and behaviors over time.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-line" class="chart-lg"></div>
@@ -106,7 +107,7 @@ Line charts are a typical pictorial representation that depicts trends and behav
 
 Area charts are used to represent quantitative variations.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-area" class="chart-lg"></div>
@@ -204,7 +205,7 @@ Area charts are used to represent quantitative variations.
 
 A bar chart is the best tool for displaying comparisons between categories of data.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-bar" class="chart-lg"></div>
@@ -312,7 +313,7 @@ A bar chart is the best tool for displaying comparisons between categories of da
 
 Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
@@ -372,7 +373,7 @@ Pie charts are an instrumental visualization tool useful in expressing data and
 
 Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
@@ -430,7 +431,7 @@ Heatmap is a visualization tool that employs color the way a bar chart employs h
 
 ## Advanced example
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <div class="card">
   <div class="card-body">
     <div id="chart-social-referrals" class="chart-lg"></div>

package/docs/ui/components/countup.mdx

@@ -1,7 +1,8 @@
 ---
 title: Countup
-description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
+summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
 libs: countup
+description: Display numbers dynamically with countups.
 ---
 
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
@@ -10,9 +11,7 @@ To be able to use the countup in your application you will need to install the c
 
 To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
 
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
+```html example libs="countup"
 <h1 data-countup>30000</h1>
 ```
 
@@ -20,7 +19,7 @@ To create a countup, add `data-countup` to any HTML text tag and specify the num
 
 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 code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup>30000</h1>
@@ -33,7 +32,7 @@ Set the `duration` to determine how long the animation should take. By default,
 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 code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup='{"startVal":12345}'>30000</h1>
@@ -44,7 +43,7 @@ You can also set the start value to be greater than the final value, so that it
 
 Set how many decimal numbers should be displayed using `decimalPlaces`.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup>3.123</h1>
@@ -57,7 +56,7 @@ Set how many decimal numbers should be displayed using `decimalPlaces`.
 
 Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup>30000</h1>
@@ -68,7 +67,7 @@ Disable easing using `"useEasing": false`. Easing is set to `true` by default, s
 
 Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup>30000</h1>
@@ -79,7 +78,7 @@ Disable grouping using `"useGrouping": false`. Grouping is set to `true` by defa
 
 You can change the default comma group separator using `separator` and specifying the one you wish to use.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup>3000000</h1>
@@ -92,7 +91,7 @@ You can change the default comma group separator using `separator` and specifyin
 
 You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
@@ -105,7 +104,7 @@ You can also change the decimal separator which is set to a full stop by default
 
 Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
@@ -117,7 +116,7 @@ Set the countup prefix using `prefix` and specifying the prefix you want to add,
 
 Set the countup suffix using `suffix`.
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup='{"suffix":"%"}'>30</h1>
@@ -127,7 +126,7 @@ Set the countup suffix using `suffix`.
 
 Of course you can mix all of these:
 
-```html code example
+```html example
 <script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
 
 <h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>

package/docs/ui/components/datagrid.mdx

@@ -1,9 +1,10 @@
 ---
 title: Data grid
-description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+description: Detailed product information in grids.
 ---
 
-```html example code vcentered height="460px"
+```html example vcentered height="460px"
 <div class="datagrid">
   <div class="datagrid-item">
     <div class="datagrid-title">Registrar</div>
@@ -88,3 +89,10 @@ description: Use the data grid component to display detailed information about y
   </div>
 </div>
 ```
+
+You can adjust the datagrid to your needs setting the values of variables:
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
+| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |

package/docs/ui/components/divider.mdx

@@ -1,14 +1,14 @@
 ---
 title: Divider
-description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
-bootstrapLink: components/dropdowns/#dividers
+summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
+description: Separate content with clear dividers.
 ---
 
 ## Default markup
 
 Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
 
-```html code example
+```html example
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -22,7 +22,7 @@ Use dividers to visually separate content into parts. You can use a line only or
 
 You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
 
-```html code example height="380px"
+```html example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -42,9 +42,9 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html code example height="380px"
+```html example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>

package/docs/ui/components/dropdowns.mdx

@@ -1,14 +1,15 @@
 ---
 title: Dropdowns
-description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
+summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
 bootstrapLink: components/dropdowns
+description: Organize options with dropdown menus.
 ---
 
 ## Default dropdown
 
 With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -23,7 +24,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us
 
 Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -43,7 +44,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
 Make a dropdown item look active, so that it highlights when a user hovers over a given option.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -62,7 +63,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over
 
 Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -81,7 +82,7 @@ Make a dropdown item look disabled to display options which are currently not av
 
 Add a dropdown header to group dropdown items into sections and name them accordingly.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -100,7 +101,7 @@ Add a dropdown header to group dropdown items into sections and name them accord
 
 Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -129,7 +130,7 @@ Use icons in your dropdowns to add more visual content and make the options easy
 
 Add an arrow that points at the dropdown button.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow">
@@ -147,7 +148,7 @@ Add an arrow that points at the dropdown button.
 
 Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -167,13 +168,19 @@ Add a badge to your dropdown items to show additional information related to an
 
 Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 1</label>
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label>
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 1
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 2
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 3
+    </label>
   </div>
 </div>
 ```
@@ -182,7 +189,7 @@ Use dropdowns with checkboxes to allow users to select options from a predefined
 
 Make your dropdown suit the dark mode of your website or software.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
@@ -221,7 +228,9 @@ Use a dropdown with card content to make it easy for users to get more informati
         <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
       </a>
       <div class="card-body d-flex flex-column">
-        <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+        <h3 class="card-title">
+          <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 ...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>