@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/components/ribbons.mdx

@@ -1,13 +1,14 @@
 ---
 title: Ribbons
-description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
+summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
+description: Highlight elements with graphical ribbons.	
 ---
 
 ## Default markup
 
 Use the `ribbon` class to add the default ribbon to any section of your interface.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -25,7 +26,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
   <div class="card-body">
   </div>
   <div class="ribbon">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -42,7 +43,7 @@ You can change the position of a ribbon by adding one of the following classes t
 
 Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -60,7 +61,7 @@ Using multiple classes at once will give you more position options. For example,
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-top ribbon-start">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -68,9 +69,9 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -88,7 +89,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
   <div class="card-body">
   </div>
   <div class="ribbon bg-red">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -98,7 +99,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
 
 Add your own text to a ribbon to display any additional information and make it easy to spot for users.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -116,7 +117,7 @@ Add your own text to a ribbon to display any additional information and make it
   <div class="card-body">
   </div>
   <div class="ribbon bg-green">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -126,7 +127,7 @@ Add your own text to a ribbon to display any additional information and make it
 
 Change the style of a ribbon to make it go well with your interface design.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card w-100">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -144,7 +145,7 @@ Change the style of a ribbon to make it go well with your interface design.
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-bookmark bg-orange">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>

package/docs/ui/components/spinners.mdx

@@ -1,20 +1,27 @@
 ---
 title: Spinners
-description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
+summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
 bootstrapLink: components/spinners/
+description: Indicate loading state with spinners.
 ---
 
 ## Default markup
 
 Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
 
-```html example code centered
+```html
+<div class="spinner-border"></div>
+```
+
+Look at the example below to see how the spinner works:
+
+```html example centered
 <div class="spinner-border"></div>
 ```
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
 
 ```html example centered separated
 <div class="spinner-border text-blue" role="status"></div>
@@ -40,7 +47,7 @@ Choose one of the available colors to customize the spinner and make it suit you
 
 Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
 
-```html example code centered separated
+```html example centered separated
 <div class="spinner-border" role="status"></div>
 <div class="spinner-border spinner-border-sm" role="status"></div>
 ```
@@ -49,7 +56,7 @@ Choose the size of your spinner. You can use the default size or use the `spinne
 
 Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
 
-```html example code centered
+```html example centered
 <div class="spinner-grow" role="status"></div>
 ```
 
@@ -75,11 +82,20 @@ Growing spinners also come in a variety of colors to choose from.
 <div class="spinner-grow text-azure" role="status"></div>
 ```
 
-### Button with spinner
+## 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 example centered separated code
+```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:
+
+```html example centered separated code background="bg-light"
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -104,11 +120,16 @@ Use buttons with spinners to notify users that an action they have taken by clic
 
 ## Animated dots
 
-```html example centered code
-<h1>Loading<span class="animated-dots"></span></h1>
+Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
+
+```html example centered code background="bg-light"
+<h1>Loading<span class="animated-dots"></span>
+</h1>
 ```
 
-```html example centered code separated
+Use buttons with animated dots 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 example centered separated background="bg-light"
 <a href="#" class="btn btn-primary">
   Loading<span class="animated-dots"></span>
 </a>

package/docs/ui/components/statuses.mdx

@@ -1,11 +1,22 @@
 ---
 title: Statuses
-description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+description: Highlight interface elements with status dots.
 ---
 
 ## Default markup
 
-```html example vertical height="7rem"
+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](/docs/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:
+
+```html example centered separated columns={2}
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
 <span class="status status-indigo">Indigo</span>
@@ -20,15 +31,21 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status status-cyan">Cyan</span>
 ```
 
+
+## Status with dot
+
+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">Blue</span>
-<span class="status status-azure">Azure</span>
-...
+<span class="status status-blue">
+  <span class="status-dot"></span>
+  Blue
+</span>
 ```
 
-## Status with dot
+Look at the example below to see how the status with a dot works:
 
-```html example code vertical height="7rem"
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot"></span>
   Blue
@@ -81,7 +98,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ### Animated dot
 
-```html example code vertical height="7rem"
+You can also animate the dot to make it more noticeable. To do this, use the `.status-dot-animated` class inside the `.status-dot` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot status-dot-animated"></span>
   Blue
@@ -134,7 +153,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Lite status
 
-```html example code vertical height="7rem"
+Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue status-lite">
   <span class="status-dot"></span>
   Blue
@@ -187,7 +208,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status dots
 
-```html code example centered separated height="7rem"
+If you need only dot status, you can use the `.status-dot` class.
+
+```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
 <span class="status-dot status-indigo"></span>
@@ -202,9 +225,9 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status-dot status-cyan"></span>
 ```
 
-### Animated dots
+The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
-```html code example centered separated height="7rem"
+```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>
 <span class="status-dot status-dot-animated status-indigo"></span>
@@ -221,7 +244,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status indicator
 
-```html code example vertical centered height="7rem"
+Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class.
+
+```html example centered separated columns={1}
 <span class="status-indicator status-blue status-indicator-animated">
   <span class="status-indicator-circle"></span>
   <span class="status-indicator-circle"></span>

package/docs/ui/components/steps.mdx

@@ -1,7 +1,8 @@
 ---
 title: Steps
-description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
+summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
 new: true
+description: Simplify complex processes with steps.
 ---
 
 ## Default markup
@@ -10,7 +11,7 @@ Steps show users where they are within a process, what steps they have already c
 
 Use the `steps` class to create the default progress tracker and name the steps accordingly.
 
-```html code example
+```html example
 <div class="steps">
   <a href="#" class="step-item">
     Step 1
@@ -31,7 +32,7 @@ Use the `steps` class to create the default progress tracker and name the steps
 
 Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
 
-```html code example
+```html example
 <div class="steps">
   <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
     Step 1
@@ -50,9 +51,9 @@ Add tooltips, if you want to provide users with additional information about the
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
-```html code example
+```html example
 <div class="steps steps-green">
   <a href="#" class="step-item">
     Step 1
@@ -87,7 +88,7 @@ You can customize the default progress indicator by changing the color to one th
 
 For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
 
-```html code example
+```html example
 <div class="steps">
   <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
   <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
@@ -100,7 +101,7 @@ For designs with limited space, use progress indicators without titles and add t
 
 Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
 
-```html code example
+```html example
 <div class="steps steps-counter steps-lime">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>

package/docs/ui/components/switch-icon.mdx

@@ -1,14 +1,15 @@
 ---
 title: Switch icon
-description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
+summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
 banner: icons
+description: Transition between two icons smoothly.
 ---
 
 ## Default markup
 
 To replace the icons, all should add `active` class to the `switch-icon` component.
 
-```html code example centered
+```html example centered
 <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -29,7 +30,7 @@ To replace the icons, all should add `active` class to the `switch-icon` compone
 
 You can also add a fancy animation to add variety to your button. See demo below:
 
-```html example code centered separated
+```html example centered separated
 <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">

package/docs/ui/components/tables.mdx

@@ -1,7 +1,8 @@
 ---
 title: Tables
-description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
+summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
 bootstrapLink: content/tables/
+description: Visualize data clearly with tables.
 ---
 
 ## Basic Table
@@ -10,7 +11,7 @@ The basic table design has light padding and the presented data is separated wih
 
 The `.table` class adds basic styling to a table:
 
-```html code example height="360px" scrollable
+```html example height="360px" scrollable
 <div class="table-responsive">
   <table class="table table-vcenter">
     <thead>
@@ -28,7 +29,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -41,7 +44,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -54,7 +59,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -67,7 +74,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">dslane3@epa.gov</a>
+        </td>
         <td class="text-secondary">
           Owner
         </td>
@@ -80,7 +89,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">elevet4@senate.gov</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -97,7 +108,7 @@ The `.table` class adds basic styling to a table:
 
 Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
 
-```html code example height="12rem"
+```html example height="12rem"
 <table class="table table-responsive">
   <thead>
     <tr>
@@ -184,8 +195,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ```html
 <div class="table-responsive">
-  <table
-		class="table table-vcenter table-nowrap">
+  <table class="table table-vcenter table-nowrap">
     <thead>
       <tr>
         <th>Name</th>
@@ -202,7 +212,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -219,7 +231,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -236,7 +250,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -253,7 +269,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">dslane3@epa.gov</a>
+        </td>
         <td class="text-secondary">
           Owner
         </td>
@@ -270,7 +288,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">elevet4@senate.gov</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -289,7 +309,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ## Table Variants
 
-```html code example height="360px" scrollable
+```html example height="360px" scrollable
 <table class="table">
   <thead>
     <tr>
@@ -350,7 +370,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ## Table with sticky header
 
-```html example code scrollable
+```html example scrollable
 <table class="table">
   <thead class="sticky-top">
     <tr>

package/docs/ui/components/tabs.mdx

@@ -1,14 +1,15 @@
 ---
 title: Tabs
-description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
+summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
 bootstrapLink: components/navs/
+description: Organize content with interactive tabs.
 ---
 
 ## Default markup
 
 Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -39,27 +40,32 @@ Use tabs to let users access different sections within one context quickly and w
 
 Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
       <li class="nav-item">
-        <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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="5 12 3 12 12 3 21 12 19 12" />
             <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
             <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-          </svg> Home</a>
+          </svg> Home
+        </a>
       </li>
       <li class="nav-item">
-        <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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" />
             <circle cx="12" cy="7" r="4" />
             <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-          </svg> Profile</a>
+          </svg> Profile
+        </a>
       </li>
       <li class="nav-item ms-auto">
-        <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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" />
             <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
             <circle cx="12" cy="12" r="3" />
@@ -91,7 +97,7 @@ Add icons to your tab labels, if you want to use a visual element and make the t
 
 Use tabs without label names to save space and make the tab content easy to recognize for international users.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -148,7 +154,7 @@ Use tabs without label names to save space and make the tab content easy to reco
 
 Make one or more of your tabs into a dropdown to add more options within one element.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -190,7 +196,7 @@ Make one or more of your tabs into a dropdown to add more options within one ele
 
 Add the `nav-fill` class to make the tabs take up the full space of the parent element.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">