@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/datagrid.mdx

@@ -0,0 +1,90 @@
+---
+title: Data grid
+description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+---
+
+```html example code vcentered height="460px"
+<div class="datagrid">
+  <div class="datagrid-item">
+    <div class="datagrid-title">Registrar</div>
+    <div class="datagrid-content">Third Party</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Nameservers</div>
+    <div class="datagrid-content">Third Party</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Port number</div>
+    <div class="datagrid-content">3306</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Expiration date</div>
+    <div class="datagrid-content">–</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Creator</div>
+    <div class="datagrid-content">
+      <div class="d-flex align-items-center">
+        <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/samples/avatars/027m.jpg)"></span>
+        Paweł Kuna
+      </div>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Age</div>
+    <div class="datagrid-content">15 days</div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Edge network</div>
+    <div class="datagrid-content">
+      <span class="status status-green">
+        Active
+      </span>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Avatars list</div>
+    <div class="datagrid-content">
+      <div class="avatar-list avatar-list-stacked">
+        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/029f.jpg)"></span>
+        <span class="avatar avatar-xs rounded">JL</span>
+        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/015f.jpg)"></span>
+        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/004m.jpg)"></span>
+        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/037m.jpg)"></span>
+        <span class="avatar avatar-xs rounded">+3</span>
+      </div>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Checkbox</div>
+    <div class="datagrid-content">
+      <label class="form-check">
+        <input class="form-check-input" type="checkbox" checked />
+        <span class="form-check-label">Click me</span>
+      </label>
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Icon</div>
+    <div class="datagrid-content">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" 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="M5 12l5 5l10 -10" />
+      </svg>
+      Checked
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Form control</div>
+    <div class="datagrid-content">
+      <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
+    </div>
+  </div>
+  <div class="datagrid-item">
+    <div class="datagrid-title">Longer description</div>
+    <div class="datagrid-content">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </div>
+  </div>
+</div>
+```

package/docs/components/divider.mdx

@@ -0,0 +1,63 @@
+---
+title: Divider
+description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
+bootstrapLink: components/dropdowns/#dividers
+---
+
+## Default markup
+
+Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
+
+```html code example
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text">See also</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+```
+
+## Text position
+
+You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
+
+```html code example height="380px"
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text hr-text-left">Left divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+<div class="hr-text">Centered divider</div>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text hr-text-right">Right divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+```
+
+## Divider color
+
+Customize the color of dividers to make them go well with your design. Click [here](colors) to see the list of available colors.
+
+```html code example height="380px"
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text text-green">Green divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+<div class="hr-text text-red">Red divider</div>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+<div class="hr-text text-primary">Primary divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+```

package/docs/components/dropdowns.mdx

@@ -0,0 +1,245 @@
+---
+title: Dropdowns
+description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
+bootstrapLink: components/dropdowns
+---
+
+## Default dropdown
+
+With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
+
+```html example code height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Third action</a>
+  </div>
+</div>
+```
+
+## Dropdown divider
+
+Use dropdown dividers to separate groups of dropdown items for greater clarity.
+
+```html example code height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+    </a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+```
+
+## Active state
+
+Make a dropdown item look active, so that it highlights when a user hovers over a given option.
+
+```html example code height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+    </a>
+    <a class="dropdown-item active" href="#">Active action</a>
+  </div>
+</div>
+```
+
+## Disabled state
+
+Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+    </a>
+    <a class="dropdown-item disabled" href="#">Disabled action</a>
+  </div>
+</div>
+```
+
+## Dropdown header
+
+Add a dropdown header to group dropdown items into sections and name them accordingly.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#">
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with icons
+
+Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" 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.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"></path>
+        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      </svg>
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" 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="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+        <path d="M13.5 6.5l4 4"></path>
+      </svg>
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with arrow
+
+Add an arrow that points at the dropdown button.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-arrow">
+    <a class="dropdown-item" href="#">
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with badge
+
+Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">
+      Action
+      <span class="badge bg-primary ms-auto">12</span>
+    </a>
+    <a class="dropdown-item" href="#">
+      Another action
+      <span class="badge bg-green ms-auto"></span>
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with checkboxes
+
+Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu">
+    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 1</label>
+    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label>
+    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label>
+  </div>
+</div>
+```
+
+## Dark dropdown
+
+Make your dropdown suit the dark mode of your website or software.
+
+```html code example height="16rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
+    <span class="dropdown-header">Dropdown header</span>
+    <a class="dropdown-item" href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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>
+      Action
+    </a>
+    <a class="dropdown-item" href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-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="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+        <path d="M16 5l3 3" />
+      </svg>
+      Another action
+    </a>
+  </div>
+</div>
+```
+
+## Dropdown with card content
+
+Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
+
+```html example height="35rem"
+<div class="dropdown">
+  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
+  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
+    <div class="card d-flex flex-column">
+      <a href="#">
+        <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
+      </a>
+      <div class="card-body d-flex flex-column">
+        <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+        <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+        <div class="d-flex align-items-center pt-4 mt-auto">
+          <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
+          <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" 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>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```

package/docs/components/dropzone.mdx

@@ -0,0 +1,63 @@
+---
+title: Dropzone
+libs: dropzone
+description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+---
+
+## Default Dropzone
+
+```html example code vendors height="240px"
+<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="file" type="file" />
+  </div>
+</form>
+
+<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
+<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-default")
+  })
+</script>
+```
+
+## Add multiple files
+
+```html example code vendors height="240px"
+<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="file" type="file" multiple />
+  </div>
+</form>
+
+<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
+<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-mulitple")
+  })
+</script>
+```
+
+## Custom Dropzone
+
+```html example code vendors height="240px"
+<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="file" type="file" />
+  </div>
+  <div class="dz-message">
+    <h3 class="dropzone-msg-title">Your text here</h3>
+    <span class="dropzone-msg-desc">Your custom description here</span>
+  </div>
+</form>
+
+<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
+<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-custom")
+  })
+</script>
+```

package/docs/components/empty.mdx

@@ -0,0 +1,103 @@
+---
+title: Empty states
+description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
+---
+
+## Default markup
+
+Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
+
+```html code example height="300px"
+<div class="empty">
+  <div class="empty-icon">
+    <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="12" r="9" />
+      <line x1="9" y1="10" x2="9.01" y2="10" />
+      <line x1="15" y1="10" x2="15.01" y2="10" />
+      <path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" />
+    </svg>
+  </div>
+  <p class="empty-title">No results found</p>
+  <p class="empty-subtitle text-secondary">
+    Try adjusting your search or filter to find what you're looking for.
+  </p>
+  <div class="empty-action">
+    <a href="#" class="btn btn-primary">
+      <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="10" cy="10" r="7" />
+        <line x1="21" y1="21" x2="15" y2="15" />
+      </svg>
+      Search again
+    </a>
+  </div>
+</div>
+```
+
+## Empty state with illustration
+
+Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
+
+```html code example height="300px"
+<div class="empty">
+  <div class="empty-img"><img src="..." height="128" alt="" />
+  </div>
+  <p class="empty-title">Invoices are managed from here</p>
+  <p class="empty-subtitle text-secondary">
+    Try adjusting your search or filter to find what you're looking for.
+  </p>
+  <div class="empty-action">
+    <a href="#" class="btn btn-primary">
+      <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" />
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+      New invoice
+    </a>
+  </div>
+</div>
+```
+
+## Empty state with header
+
+Instead of adding an icon or illustration you can simply give the text:
+
+```html example height="300px"
+<div class="empty">
+  <div class="empty-header">404</div>
+  <p class="empty-title">Oops… You just found an error page</p>
+  <p class="empty-subtitle text-secondary">
+    Try adjusting your search or filter to find what you're looking for.
+  </p>
+  <div class="empty-action">
+    <a href="#" class="btn btn-primary">
+      <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" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+        <line x1="5" y1="12" x2="11" y2="18" />
+        <line x1="5" y1="12" x2="11" y2="6" />
+      </svg>
+      Take me home
+    </a>
+  </div>
+</div>
+```
+
+```html
+<div class="empty">
+  <div class="empty-header">404</div>
+  <p class="empty-title">Oops… You just found an error page</p>
+  <p class="empty-subtitle text-secondary">
+    Try adjusting your search or filter to find what you're looking for.
+  </p>
+  <div class="empty-action">
+    <a href="#" class="btn btn-primary">
+      <!-- SVG icon from http://tabler-icons.io/i/arrow-left -->
+      <svg>...</svg>
+      Take me home
+    </a>
+  </div>
+</div>
+```