@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/icons.mdx

@@ -0,0 +1,120 @@
+---
+title: Icons
+description: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+banner: icons
+---
+
+## Base icon
+
+```html code example centered separated
+<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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <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>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ghost-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"></path>
+  <path d="M10 9h.01"></path>
+  <path d="M14 9h.01"></path>
+  <path d="M12 3a7 7 0 0 1 7 7v1l1 0a2 2 0 1 1 0 4l-1 0v3l2 3h-10a6 6 0 0 1 -6 -5.775l0 -.226l-1 0a2 2 0 0 1 0 -4l1 0v-1a7 7 0 0 1 7 -7z"></path>
+  <path d="M11 14h2a1 1 0 0 0 -2 0z"></path>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lego" 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>
+  <path d="M9.5 11l.01 0"></path>
+  <path d="M14.5 11l.01 0"></path>
+  <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
+  <path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3"></path>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-building-carousel" 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>
+  <path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path>
+  <path d="M5 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M12 4m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M19 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M5 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M19 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M8 22l4 -10l4 10"></path>
+</svg>
+```
+
+## Filled icons
+
+```html code example centered separated
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" 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>
+  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-ringing-filled" 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>
+  <path d="M17.451 2.344a1 1 0 0 1 1.41 -.099a12.05 12.05 0 0 1 3.048 4.064a1 1 0 1 1 -1.818 .836a10.05 10.05 0 0 0 -2.54 -3.39a1 1 0 0 1 -.1 -1.41z" stroke-width="0" fill="currentColor"></path>
+  <path d="M5.136 2.245a1 1 0 0 1 1.312 1.51a10.05 10.05 0 0 0 -2.54 3.39a1 1 0 1 1 -1.817 -.835a12.05 12.05 0 0 1 3.045 -4.065z" stroke-width="0" fill="currentColor"></path>
+  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
+  <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cherry-filled" 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>
+  <path d="M16.588 5.191l.058 .045l.078 .074l.072 .084l.013 .018a.998 .998 0 0 1 .182 .727l-.022 .111l-.03 .092c-.99 2.725 -.666 5.158 .679 7.706a4 4 0 1 1 -4.613 4.152l-.005 -.2l.005 -.2a4.002 4.002 0 0 1 2.5 -3.511c-.947 -2.03 -1.342 -4.065 -1.052 -6.207c-.166 .077 -.332 .15 -.499 .218l.094 -.064c-2.243 1.47 -3.552 3.004 -3.98 4.57a4.5 4.5 0 1 1 -7.064 3.906l-.004 -.212l.005 -.212a4.5 4.5 0 0 1 5.2 -4.233c.332 -1.073 .945 -2.096 1.83 -3.069c-1.794 -.096 -3.586 -.759 -5.355 -1.986l-.268 -.19l-.051 -.04l-.046 -.04l-.044 -.044l-.04 -.046l-.04 -.05l-.032 -.047l-.035 -.06l-.053 -.11l-.038 -.116l-.023 -.117l-.005 -.042l-.005 -.118l.01 -.118l.023 -.117l.038 -.115l.03 -.066l.023 -.045l.035 -.06l.032 -.046l.04 -.051l.04 -.046l.044 -.044l.046 -.04l.05 -.04c4.018 -2.922 8.16 -2.922 12.177 0z" stroke-width="0" fill="currentColor"></path>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-key-filled" 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>
+  <path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -20 0c0 -5.523 4.477 -10 10 -10zm2 5a3 3 0 0 0 -2.98 2.65l-.015 .174l-.005 .176l.005 .176c.019 .319 .087 .624 .197 .908l.09 .209l-3.5 3.5l-.082 .094a1 1 0 0 0 0 1.226l.083 .094l1.5 1.5l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-.792 -.793l.585 -.585l.793 .792l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-.792 -.793l.792 -.792a3 3 0 1 0 1.293 -5.708zm0 2a1 1 0 1 1 0 2a1 1 0 0 1 0 -2z" stroke-width="0" fill="currentColor"></path>
+</svg>
+```
+
+## Icon colors
+
+```html example code centered separated
+<span class="text-red">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" 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>
+    <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+  </svg>
+</span>
+<span class="text-yellow">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" 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>
+    <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
+  </svg>
+</span>
+<span class="text-blue">
+  <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">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+  </svg>
+</span>
+<span class="text-green">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded" 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>
+    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
+  </svg>
+</span>
+```
+
+## Icon animations
+
+```html example centered separated
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" 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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada" 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 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
+  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-rotate" 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="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>
+```
+
+```html
+<!-- SVG icon from http://tabler-icons.io/i/heart -->
+<svg class="icon-pulse" ...>...</svg>
+
+<!-- SVG icon from http://tabler-icons.io/i/bell -->
+<svg class="icon-tada" ...>...</svg>
+
+<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
+<svg class="icon-rotate" ...>...</svg>
+```

package/docs/components/inline-player.mdx

@@ -0,0 +1,31 @@
+---
+title: Inline player
+libs: plyr
+description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+---
+
+## Sample demo
+
+```html example code vendors height="500px"
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-youtube'));
+  });
+</script>
+```
+
+## Vimeo file
+
+```html example code vendors height="500px"
+<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
+
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-vimeo'));
+  });
+</script>
+```

package/docs/components/modals.mdx

@@ -0,0 +1,222 @@
+---
+title: Modals
+description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+---
+
+## Default markup
+
+```html example code centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch demo modal
+</button>
+
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Prompt and alert
+
+```html example code centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch alert modal
+</button>
+
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-status bg-danger"></div>
+      <div class="modal-body text-center py-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" 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="M12 9v2m0 4v.01" />
+          <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+        </svg>
+        <h3>Are you sure?</h3>
+        <div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
+      </div>
+      <div class="modal-footer">
+        <div class="w-100">
+          <div class="row">
+            <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
+                Cancel
+              </a></div>
+            <div class="col"><a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
+                Delete 84 items
+              </a></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```html example code centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch demo modal
+</button>
+
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-status bg-success"></div>
+      <div class="modal-body text-center py-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" 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="12" r="9" />
+          <path d="M9 12l2 2l4 -4" />
+        </svg>
+        <h3>Payment succedeed</h3>
+        <div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
+      </div>
+      <div class="modal-footer">
+        <div class="w-100">
+          <div class="row">
+            <div class="col">
+              <a href="#" class="btn w-100" data-bs-dismiss="modal">
+                Go to dashboard
+              </a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">
+                View invoice
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Modal with form
+
+```html example code centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch modal with form
+</button>
+
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">New report</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+          <label class="form-label">Name</label>
+          <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" />
+        </div>
+        <label class="form-label">Report type</label>
+        <div class="form-selectgroup-boxes row mb-3">
+          <div class="col-md-6">
+            <label class="form-selectgroup-item">
+              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked />
+              <span class="form-selectgroup-label d-flex align-items-center p-3">
+                <span class="me-3">
+                  <span class="form-selectgroup-check"></span>
+                </span>
+                <span class="form-selectgroup-label-content">
+                  <span class="form-selectgroup-title strong mb-1">Simple</span>
+                  <span class="d-block text-secondary">Provide only basic data needed for the report</span>
+                </span>
+              </span>
+            </label>
+          </div>
+          <div class="col-md-6">
+            <label class="form-selectgroup-item">
+              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
+              <span class="form-selectgroup-label d-flex align-items-center p-3">
+                <span class="me-3">
+                  <span class="form-selectgroup-check"></span>
+                </span>
+                <span class="form-selectgroup-label-content">
+                  <span class="form-selectgroup-title strong mb-1">Advanced</span>
+                  <span class="d-block text-secondary">Insert charts and additional advanced analyses to be inserted in the report</span>
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-8">
+            <div class="mb-3">
+              <label class="form-label">Report url</label>
+              <div class="input-group input-group-flat">
+                <span class="input-group-text">
+                  https://tabler.io/reports/
+                </span>
+                <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-4">
+            <div class="mb-3">
+              <label class="form-label">Visibility</label>
+              <select class="form-select">
+                <option value="1" selected>Private</option>
+                <option value="2">Public</option>
+                <option value="3">Hidden</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="mb-3">
+              <label class="form-label">Client name</label>
+              <input type="text" class="form-control" />
+            </div>
+          </div>
+          <div class="col-lg-6">
+            <div class="mb-3">
+              <label class="form-label">Reporting period</label>
+              <input type="date" class="form-control" />
+            </div>
+          </div>
+          <div class="col-lg-12">
+            <div>
+              <label class="form-label">Additional information</label>
+              <textarea class="form-control" rows="3"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+          Cancel
+        </a>
+        <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" 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>
+            <path d="M12 5l0 14"></path>
+            <path d="M5 12l14 0"></path>
+          </svg>
+          Create new report
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+```

package/docs/components/placeholder.mdx

@@ -0,0 +1,270 @@
+---
+title: Placeholder
+description: Placeholder is used to reserve space for content that soon will appear in a layout.
+---
+
+## Placeholder line
+
+Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
+
+```html code example columns={1}
+<div class="placeholder col-9"></div>
+<div class="placeholder col-11"></div>
+<div class="placeholder col-10"></div>
+<div class="placeholder col-8"></div>
+```
+
+However, it may be useful, however, to specify the full width in order to fit the content more effectively.
+
+```html code example columns={1}
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+```
+
+You can also move the lines to right or to center:
+
+```html code example columns={1}
+<div class="text-end">
+  <div class="placeholder col-11"></div>
+  <div class="placeholder col-10"></div>
+  <div class="placeholder col-8"></div>
+</div>
+<div class="text-center mt-3">
+  <div class="placeholder col-11"></div>
+  <div class="placeholder col-10"></div>
+  <div class="placeholder col-8"></div>
+</div>
+```
+
+## Placeholder heading
+
+A placeholder can contain also a header element looks like header:
+
+```html code example columns={1}
+<div class="placeholder col-9 mb-3"></div>
+<div class="placeholder placeholder-xs col-10"></div>
+<div class="placeholder placeholder-xs col-11"></div>
+```
+
+## Placeholder avatar
+
+You can make your placeholder item look like an avatar.
+
+```html code example columns={1}
+<div class="row">
+  <div class="col-auto">
+    <div class="avatar placeholder"></div>
+  </div>
+  <div class="col">
+    <div class="placeholder col-9"></div>
+    <div class="placeholder col-11"></div>
+  </div>
+</div>
+```
+
+The size of avatars is exactly the same as a regular avatar.
+
+```html code example centered separated
+<div class="avatar avatar-xl placeholder"></div>
+<div class="avatar avatar-lg placeholder"></div>
+<div class="avatar avatar-md placeholder"></div>
+<div class="avatar placeholder"></div>
+<div class="avatar avatar-sm placeholder"></div>
+<div class="avatar avatar-xs placeholder"></div>
+```
+
+## Placeholder image
+
+You can use a placeholder, which will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
+
+You can also use the `ratio` component, and get the image in the right proportions.
+
+```html code example columns={1} height={500} scrollable
+<div class="ratio ratio-1x1 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-4x3 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-16x9 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-21x9 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+```
+
+## Placeholder color
+
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
+<span class="placeholder col-12 bg-primary"></span>
+<span class="placeholder col-12 bg-secondary"></span>
+<span class="placeholder col-12 bg-success"></span>
+<span class="placeholder col-12 bg-danger"></span>
+<span class="placeholder col-12 bg-warning"></span>
+<span class="placeholder col-12 bg-info"></span>
+<span class="placeholder col-12 bg-light"></span>
+<span class="placeholder col-12 bg-dark"></span>
+```
+
+```html
+<span class="placeholder col-12"></span>
+
+<span class="placeholder col-12 bg-primary"></span>
+<span class="placeholder col-12 bg-secondary"></span>
+<span class="placeholder col-12 bg-success"></span>
+<span class="placeholder col-12 bg-danger"></span>
+<span class="placeholder col-12 bg-warning"></span>
+<span class="placeholder col-12 bg-info"></span>
+<span class="placeholder col-12 bg-light"></span>
+<span class="placeholder col-12 bg-dark"></span>
+```
+
+## Placeholder sizing
+
+The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
+
+```html code example columns={1}
+<span class="placeholder col-12 placeholder-lg"></span>
+<span class="placeholder col-12"></span>
+<span class="placeholder col-12 placeholder-sm"></span>
+<span class="placeholder col-12 placeholder-xs"></span>
+```
+
+## Animation
+
+Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
+
+```html code example columns={1}
+<p class="placeholder-glow">
+  <span class="placeholder col-12"></span>
+</p>
+<p class="placeholder-wave">
+  <span class="placeholder col-12"></span>
+</p>
+```
+
+## Live examples
+
+See in the following examples how else you can use the placeholder component
+
+```html code example columns={1} height={1000} separated vertical scrollable
+<div class="card placeholder-glow">
+  <div class="ratio ratio-21x9 card-img-top placeholder"></div>
+  <div class="card-body">
+    <div class="placeholder col-9 mb-3"></div>
+    <div class="placeholder placeholder-xs col-10"></div>
+    <div class="placeholder placeholder-xs col-11"></div>
+    <div class="mt-3">
+      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="row g-0 align-items-center placeholder-glow">
+    <div class="col-3">
+      <div class="ratio ratio-1x1 card-img-start placeholder"></div>
+    </div>
+    <div class="col">
+      <div class="card-body">
+        <div class="placeholder col-9 mb-3"></div>
+        <div class="placeholder placeholder-xs col-10"></div>
+        <div class="placeholder placeholder-xs col-11"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body">
+    <div class="row">
+      <div class="col-auto">
+        <div class="avatar avatar-rounded placeholder"></div>
+      </div>
+      <div class="col">
+        <div class="placeholder placeholder-xs col-9"></div>
+        <div class="placeholder placeholder-xs col-7"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body py-5 text-center">
+    <div>
+      <div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
+    </div>
+    <div class="mt w-75 mx-auto">
+      <div class="placeholder col-9 mb-3"></div>
+      <div class="placeholder placeholder-xs col-10"></div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <ul class="list-group list-group-flush placeholder-glow">
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="avatar avatar-rounded placeholder"></div>
+        </div>
+        <div class="col-7">
+          <div class="placeholder placeholder-xs col-9"></div>
+          <div class="placeholder placeholder-xs col-7"></div>
+        </div>
+        <div class="col-2 ms-auto text-end">
+          <div class="placeholder placeholder-xs col-8"></div>
+          <div class="placeholder placeholder-xs col-10"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="avatar avatar-rounded placeholder"></div>
+        </div>
+        <div class="col-7">
+          <div class="placeholder placeholder-xs col-9"></div>
+          <div class="placeholder placeholder-xs col-7"></div>
+        </div>
+        <div class="col-2 ms-auto text-end">
+          <div class="placeholder placeholder-xs col-8"></div>
+          <div class="placeholder placeholder-xs col-10"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="avatar avatar-rounded placeholder"></div>
+        </div>
+        <div class="col-7">
+          <div class="placeholder placeholder-xs col-9"></div>
+          <div class="placeholder placeholder-xs col-7"></div>
+        </div>
+        <div class="col-2 ms-auto text-end">
+          <div class="placeholder placeholder-xs col-8"></div>
+          <div class="placeholder placeholder-xs col-10"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="avatar avatar-rounded placeholder"></div>
+        </div>
+        <div class="col-7">
+          <div class="placeholder placeholder-xs col-9"></div>
+          <div class="placeholder placeholder-xs col-7"></div>
+        </div>
+        <div class="col-2 ms-auto text-end">
+          <div class="placeholder placeholder-xs col-8"></div>
+          <div class="placeholder placeholder-xs col-10"></div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+```