@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/cards.mdx

@@ -0,0 +1,343 @@
+---
+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.
+bootstrapLink: components/card/
+---
+
+## 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}
+<div class="card">
+  <div class="card-body">
+    <p>This is some text within a card body.</p>
+  </div>
+</div>
+```
+
+## Card padding
+
+You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.
+
+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}
+<div class="card card-sm">
+  <div class="card-body">
+    This is some text within a card body.
+  </div>
+</div>
+<div class="card">
+  <div class="card-body">
+    This is some text within a card body.
+  </div>
+</div>
+<div class="card card-md">
+  <div class="card-body">
+    This is some text within a card body.
+  </div>
+</div>
+<div class="card card-lg">
+  <div class="card-body">
+    This is some text within a card body.
+  </div>
+</div>
+```
+
+```html
+<div class="card card-sm">...</div>
+<div class="card">...</div>
+<div class="card card-md">...</div>
+<div class="card card-lg">...</div>
+```
+
+## 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.
+
+```html code example vertical centered separated height={400}
+<div class="card">
+  <div class="card-body">
+    <h3 class="card-title">Card title</h3>
+    <p class="text-secondary">This is some text within a card body.</p>
+  </div>
+</div>
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Card title</h3>
+  </div>
+  <div class="card-body">
+    <p class="text-secondary">This is some text within a card body.</p>
+  </div>
+</div>
+```
+
+## Card with title and image
+
+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
+<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>
+  <div class="card-body">
+    <h3 class="card-title">Card with title and image</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>
+```
+
+## Blog post card
+
+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
+<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>
+    <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>
+      <div class="ms-3">
+        <a href="#" class="text-body">Maryjo Lebarree</a>
+        <div class="text-secondary">3 days ago</div>
+      </div>
+      <div class="ms-auto">
+        <a href="#" class="icon d-none d-md-inline-block ms-3 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">
+            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Row deck
+
+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"
+<div class="row row-deck">
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">Short content</div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">Short content</div>
+    </div>
+  </div>
+</div>
+```
+
+## Post card with aside image
+
+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
+<div class="card d-flex flex-column">
+  <div class="row row-0 flex-fill">
+    <div class="col-md-3">
+      <a href="#">
+        <img src="/samples/photos/a-woman-works-on-a-laptop-at-home.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
+      </a>
+    </div>
+    <div class="col">
+      <div class="card-body">
+        <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>
+          <div class="ms-3">
+            <a href="#" class="text-body">Egan Poetz</a>
+            <div class="text-secondary">3 days ago</div>
+          </div>
+          <div class="ms-auto">
+            <a href="#" class="icon d-none d-md-inline-block ms-3 text-red">
+              <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">
+                <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Color variations
+
+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}
+<div class="row row-deck">
+  <div class="col-md-6">
+    <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>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <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>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<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>
+  </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>
+  </div>
+</div>
+```
+
+## Stacked card
+
+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}
+<div class="card card-stacked">
+  <div class="card-body">
+    <h3 class="card-title">Stacked card</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>
+```
+
+## Tabbed card
+
+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}
+<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>
+  </ul>
+  <div class="tab-content">
+    <div id="tab-top-1" class="card tab-pane active show">
+      <div class="card-body">
+        <div class="card-title">Content of tab #1</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <div id="tab-top-2" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #2</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <div id="tab-top-3" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #3</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <div id="tab-top-4" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #4</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<!-- Cards with tabs component -->
+<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>
+  </ul>
+  <div class="tab-content">
+    <!-- Content of card #1 -->
+    <div id="tab-top-1" class="card tab-pane active show">
+      <div class="card-body">
+        <div class="card-title">Content of tab #1</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <!-- Content of card #2 -->
+    <div id="tab-top-2" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #2</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <!-- Content of card #3 -->
+    <div id="tab-top-3" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #3</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+    <!-- Content of card #4 -->
+    <div id="tab-top-4" class="card tab-pane">
+      <div class="card-body">
+        <div class="card-title">Content of tab #4</div>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+

package/docs/components/carousel.mdx

@@ -0,0 +1,235 @@
+---
+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.
+bootstrapLink: components/carousel/
+---
+
+## 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"
+<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>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/city-lights-reflected-in-the-water-at-night.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/tropical-palm-leaves-floral-pattern-background.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
+    </div>
+  </div>
+  <a class="carousel-control-prev" data-bs-target="#carousel-sample" role="button" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </a>
+  <a class="carousel-control-next" data-bs-target="#carousel-sample" role="button" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </a>
+</div>
+```
+
+## Dots indicators
+
+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"
+<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>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/coffee-on-a-table-with-other-items.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/book-on-the-grass.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
+    </div>
+  </div>
+</div>
+```
+
+## Thumb indicators
+
+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"
+<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>
+    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/samples/photos/young-woman-working-in-a-cafe.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(/samples/photos/stylish-workplace-with-computer-at-home.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(/samples/photos/stylish-workspace-with-macbook-pro.jpg)"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/group-of-people-sightseeing-in-the-city.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workplace-with-computer-at-home.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
+    </div>
+  </div>
+</div>
+```
+
+## Vertical indicators
+
+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"
+<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>
+    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/man-looking-out-to-sea.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/making-magic-with-fairy-lights.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/cup-of-coffee-on-table-in-cafe-2.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg" />
+    </div>
+  </div>
+</div>
+```
+
+Likewise, you can add thumbnails on the right side:
+
+```html code 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>
+    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/samples/photos/businesswoman-working-at-her-laptop.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(/samples/photos/color-palette-guide-sample-colors-catalog-.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg)"></button>
+    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg)"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/businesswoman-working-at-her-laptop.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg" />
+    </div>
+  </div>
+</div>
+```
+
+## Carousel with captions
+
+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"
+<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/workplace-with-laptop-on-table-at-home-4.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/people-watching-a-presentation-in-a-room.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/cup-of-coffee-and-an-open-book.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+  </div>
+  <a class="carousel-control-prev" data-bs-target="#carousel-captions" role="button" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </a>
+  <a class="carousel-control-next" data-bs-target="#carousel-captions" role="button" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </a>
+</div>
+```