@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/tables.mdx

@@ -0,0 +1,410 @@
+---
+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.
+bootstrapLink: content/tables/
+---
+
+## Basic Table
+
+The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
+
+The `.table` class adds basic styling to a table:
+
+```html code example height="360px" scrollable
+<div class="table-responsive">
+  <table class="table table-vcenter">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Title</th>
+        <th>Email</th>
+        <th>Role</th>
+        <th class="w-1"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Paweł Kuna</td>
+        <td class="text-secondary">
+          UI Designer, Training
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          User
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Jeffie Lewzey</td>
+        <td class="text-secondary">
+          Chemical Engineer, Support
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          Admin
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Mallory Hulme</td>
+        <td class="text-secondary">
+          Geologist IV, Support
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          User
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Dunn Slane</td>
+        <td class="text-secondary">
+          Research Nurse, Sales
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          Owner
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Emmy Levet</td>
+        <td class="text-secondary">
+          VP Product Management, Accounting
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          Admin
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+## Responsive tables
+
+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"
+<table class="table table-responsive">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th class="text-nowrap">Heading 1</th>
+      <th class="text-nowrap">Heading 2</th>
+      <th class="text-nowrap">Heading 3</th>
+      <th class="text-nowrap">Heading 4</th>
+      <th class="text-nowrap">Heading 5</th>
+      <th class="text-nowrap">Heading 6</th>
+      <th class="text-nowrap">Heading 7</th>
+      <th class="text-nowrap">Heading 8</th>
+      <th class="text-nowrap">Heading 9</th>
+      <th class="text-nowrap">Heading 10</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th>2</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## No wrap
+
+If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
+
+```html example height="10rem"
+<div class="table-responsive">
+  <table class="table table-vcenter table-nowrap">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Title</th>
+        <th>Email</th>
+        <th>Role</th>
+        <th></th>
+        <th class="w-1"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Paweł Kuna</td>
+        <td class="text-secondary">UI Designer, Training</td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
+        </td>
+        <td class="text-secondary">User</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.</td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+```html
+<div class="table-responsive">
+  <table
+		class="table table-vcenter table-nowrap">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Title</th>
+        <th>Email</th>
+        <th>Role</th>
+        <th></th>
+        <th class="w-1"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Paweł Kuna</td>
+        <td class="text-secondary">
+          UI Designer, Training
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          User
+        </td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Jeffie Lewzey</td>
+        <td class="text-secondary">
+          Chemical Engineer, Support
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          Admin
+        </td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Mallory Hulme</td>
+        <td class="text-secondary">
+          Geologist IV, Support
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          User
+        </td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Dunn Slane</td>
+        <td class="text-secondary">
+          Research Nurse, Sales
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          Owner
+        </td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Emmy Levet</td>
+        <td class="text-secondary">
+          VP Product Management, Accounting
+        </td>
+        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          Admin
+        </td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
+          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
+          quaerat quo repellendus, voluptates.
+        </td>
+        <td>
+          <a href="#">Edit</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+## Table Variants
+
+```html code example height="360px" scrollable
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">Class</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Default</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-primary">
+      <th scope="row">Primary</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-secondary">
+      <th scope="row">Secondary</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-success">
+      <th scope="row">Success</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-danger">
+      <th scope="row">Danger</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-warning">
+      <th scope="row">Warning</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-info">
+      <th scope="row">Info</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-light">
+      <th scope="row">Light</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-dark">
+      <th scope="row">Dark</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Table with sticky header
+
+```html example code scrollable
+<table class="table">
+  <thead class="sticky-top">
+    <tr>
+      <th scope="col">Class</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Default</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Primary</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Secondary</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Success</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Danger</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Warning</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Info</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">Light</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr class="table-dark">
+      <th scope="row">Dark</th>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+```

package/docs/components/tabs.mdx

@@ -0,0 +1,243 @@
+---
+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.
+bootstrapLink: components/navs/
+---
+
+## 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"
+<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-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
+      </li>
+      <li class="nav-item">
+        <a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <div class="tab-content">
+      <div class="tab-pane active show" id="tabs-home-ex1">
+        <h4>Home tab</h4>
+        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
+      </div>
+      <div class="tab-pane" id="tabs-profile-ex1">
+        <h4>Profile tab</h4>
+        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Tabs with icons
+
+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"
+<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">
+            <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>
+      </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">
+            <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>
+      </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">
+            <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" />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <div class="tab-content">
+      <div class="tab-pane active show" id="tabs-home-ex2">
+        <h4>Home tab</h4>
+        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
+      </div>
+      <div class="tab-pane" id="tabs-profile-ex2">
+        <h4>Profile tab</h4>
+        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
+      </div>
+      <div class="tab-pane" id="tabs-settings-ex2">
+        <h4>Settings tab</h4>
+        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Tabs only with icons
+
+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"
+<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-ex3" class="nav-link active" 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" />
+            <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>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="#tabs-profile-ex3" class="nav-link" 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" />
+            <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>
+        </a>
+      </li>
+      <li class="nav-item ms-auto">
+        <a href="#tabs-settings-ex3" 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" />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <div class="tab-content">
+      <div class="tab-pane active show" id="tabs-home-ex3">
+        <h4>Home tab</h4>
+        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
+      </div>
+      <div class="tab-pane" id="tabs-profile-ex3">
+        <h4>Profile tab</h4>
+        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
+      </div>
+      <div class="tab-pane" id="tabs-settings-ex3">
+        <h4>Settings tab</h4>
+        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Tabs with dropdown
+
+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"
+<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-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
+      </li>
+      <li class="nav-item">
+        <a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" href="#">
+            Action
+          </a>
+          <a class="dropdown-item" href="#">
+            Another action
+          </a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <div class="tab-content">
+      <div class="tab-pane active show" id="tabs-home-ex4">
+        <h4>Home tab</h4>
+        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
+      </div>
+      <div class="tab-pane" id="tabs-profile-ex4">
+        <h4>Profile tab</h4>
+        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Full-width tabs
+
+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"
+<div class="card">
+  <div class="card-header">
+    <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">
+      <li class="nav-item">
+        <a href="#tabs-home-ex5" class="nav-link active" 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" />
+            <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>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="#tabs-profile-ex5" class="nav-link" 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" />
+            <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>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="#tabs-activity-ex5" class="nav-link" 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="M3 12h4l3 8l4 -16l3 8h4" />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="card-body">
+    <div class="tab-content">
+      <div class="tab-pane active show" id="tabs-home-ex5">
+        <h4>Home tab</h4>
+        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
+      </div>
+      <div class="tab-pane" id="tabs-profile-ex5">
+        <h4>Profile tab</h4>
+        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
+      </div>
+      <div class="tab-pane" id="tabs-activity-ex5">
+        <h4>Activity tab</h4>
+        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
+      </div>
+    </div>
+  </div>
+</div>
+```