@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/alerts.mdx

@@ -0,0 +1,430 @@
+---
+title: Alerts
+description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
+bootstrapLink: components/alerts/
+---
+
+## Default markup
+
+Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
+
+```html example vertical height="420px"
+<div class="alert alert-success" role="alert">
+  <h4 class="alert-title">Wow! Everything worked!</h4>
+  <div class="text-secondary">Your account has been saved!</div>
+</div>
+<div class="alert alert-info" role="alert">
+  <h4 class="alert-title">Did you know?</h4>
+  <div class="text-secondary">Here is something that you might like to know.</div>
+</div>
+<div class="alert alert-warning" role="alert">
+  <h4 class="alert-title">Uh oh, something went wrong</h4>
+  <div class="text-secondary">Sorry! There was a problem with your request.</div>
+</div>
+<div class="alert alert-danger" role="alert">
+  <h4 class="alert-title">I'm so sorry&hellip;</h4>
+  <div class="text-secondary">Your account has been deleted and can't be restored.</div>
+</div>
+```
+
+```html
+<div class="alert alert-success" role="alert">
+  <h4 class="alert-title">Wow! Everything worked!</h4>
+  <div class="text-secondary">Your account has been saved!</div>
+</div>
+```
+
+## Alert links
+
+Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
+
+```html example vertical code height="7rem"
+<div class="alert alert-danger m-0">
+  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
+</div>
+```
+
+## Dismissible alerts
+
+Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
+
+```html example height="420px"
+<div class="alert alert-success alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="M5 12l5 5l10 -10" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-info alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="12" y1="8" x2="12.01" y2="8" />
+        <polyline points="11 12 12 12 12 16 13 16" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Did you know?</h4>
+      <div class="text-secondary">Here is something that you might like to know.</div>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-warning alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="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>
+    </div>
+    <div>
+      <h4 class="alert-title">Uh oh, something went wrong</h4>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-danger alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="12" y1="8" x2="12" y2="12" />
+        <line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">I'm so sorry&hellip;</h4>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+```
+
+```html
+<div class="alert alert-success alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+```
+
+## Alerts with icons
+
+Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
+
+```html example height="420px"
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="M5 12l5 5l10 -10" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-info" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="12" y1="8" x2="12.01" y2="8" />
+        <polyline points="11 12 12 12 12 16 13 16" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Did you know?</h4>
+      <div class="text-secondary">Here is something that you might like to know.</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-warning" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="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>
+    </div>
+    <div>
+      <h4 class="alert-title">Uh oh, something went wrong</h4>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-danger" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="12" y1="8" x2="12" y2="12" />
+        <line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+    </div>
+    <div>
+      <h4 class="alert-title">I'm so sorry&hellip;</h4>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-info" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Did you know?</h4>
+      <div class="text-secondary">Here is something that you might like to know.</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-warning" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Uh oh, something went wrong</h4>
+      <div class="text-secondary">Sorry! There was a problem with your request.</div>
+    </div>
+  </div>
+</div>
+<div class="alert alert-danger" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">I'm so sorry&hellip;</h4>
+      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
+    </div>
+  </div>
+</div>
+```
+
+## Alert with avatar
+
+Add an avatar to your alert modal to make it more personalized.
+
+```html code example height="420px"
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <span class="avatar float-start me-3"></span>
+    </div>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </div>
+  </div>
+</div>
+<div class="alert alert-info" role="alert">
+  <div class="d-flex">
+    <div>
+      <span class="avatar float-start me-3">JL</span>
+    </div>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </div>
+  </div>
+</div>
+<div class="alert alert-warning" role="alert">
+  <div class="d-flex">
+    <div>
+      <span class="avatar float-start me-3"></span>
+    </div>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </div>
+  </div>
+</div>
+<div class="alert alert-danger" role="alert">
+  <div class="d-flex">
+    <div>
+      <span class="avatar float-start me-3"></span>
+    </div>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </div>
+  </div>
+</div>
+```
+
+## Alert with buttons
+
+Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
+
+```html code example height="500px" scrollable
+<div class="alert alert-success alert-dismissible" role="alert">
+  <h3 class="mb-1">Some Title</h3>
+  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <div class="btn-list">
+    <a href="#" class="btn btn-success">Okay</a>
+    <a href="#" class="btn">Cancel</a>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-info alert-dismissible" role="alert">
+  <h3 class="mb-1">Some Title</h3>
+  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <div class="btn-list">
+    <a href="#" class="btn btn-info">Okay</a>
+    <a href="#" class="btn">Cancel</a>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-warning alert-dismissible" role="alert">
+  <h3 class="mb-1">Some Title</h3>
+  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <div class="btn-list">
+    <a href="#" class="btn btn-warning">Okay</a>
+    <a href="#" class="btn">Cancel</a>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-danger alert-dismissible" role="alert">
+  <h3 class="mb-1">Some Title</h3>
+  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <div class="btn-list">
+    <a href="#" class="btn btn-danger">Okay</a>
+    <a href="#" class="btn">Cancel</a>
+  </div>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+```
+
+## Important alerts
+
+If you want your alert to be really eye-catching, you can add a class `alert-important`.
+
+```html example vertical height="210px"
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+		<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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>
+			<path d="M5 12l5 5l10 -10"></path>
+		</svg>
+    </div>
+    <div>
+		 <h4 class="alert-title">Wow! Everything worked!</h4>
+		 <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-important alert-danger alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="12" y1="8" x2="12" y2="12" />
+        <line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+    </div>
+    <div>Your account has been deleted and can't be restored.</div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+```
+
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      Your account has been saved!
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-important alert-info alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      Here is something that you might like to know.
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-important alert-warning alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      Sorry! There was a problem with your request.
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+<div class="alert alert-important alert-danger alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <svg>...</svg>
+    </div>
+    <div>
+      Your account has been deleted and can't be restored.
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
+```
+

package/docs/components/autosize.mdx

@@ -0,0 +1,16 @@
+---
+title: Autosize
+description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
+libs: autosize
+---
+
+To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
+
+## Default markup
+
+Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
+
+```html code example centered columns={1} scrollable
+<label class="form-label">Autosize example</label>
+<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
+```

package/docs/components/avatars.mdx

@@ -0,0 +1,172 @@
+---
+title: Avatars
+description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
+---
+
+## Default markup
+
+Use the `avatar` class to add an avatar to your interface design for greater customisation.
+
+```html example centered separated code
+<span class="avatar" style="background-image: url(/samples/avatars/002f.jpg)"></span>
+<span class="avatar">JL</span>
+<span class="avatar" style="background-image: url(/samples/avatars/004f.jpg)"></span>
+```
+
+## Avatar image
+
+Set an image as the background to make users easy to indentify and create a personalised experience.
+
+```html example centered separated code
+<span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
+<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)"></span>
+<span class="avatar" style="background-image: url(/samples/avatars/036m.jpg)"></span>
+```
+
+## Initials
+
+You can also use initials instead of pictures.
+
+```html example centered separated code
+<span class="avatar">AB</span>
+<span class="avatar">CD</span>
+<span class="avatar">EF</span>
+<span class="avatar">GH</span>
+<span class="avatar">IJ</span>
+```
+
+## Avatar icons
+
+Apart from pictures and initials, you can also use icons to make the avatars more universal.
+
+```html example centered separated
+<span class="avatar">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-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>
+</span>
+<span class="avatar">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-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>
+</span>
+<span class="avatar">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-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="9" cy="7" r="4" />
+    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+    <path d="M16 11h6m-3 -3v6" />
+  </svg>
+</span>
+```
+
+```html
+<span class="avatar">
+  <!-- SVG icon from http://tabler-icons.io/i/user -->
+  <svg>...</svg>
+</span>
+```
+
+## Avatar initials color
+
+Customize the color of the avatars' background. You can click [here](colors) to see the list of available colors.
+
+```html example centered separated code
+<span class="avatar bg-green-lt">AB</span>
+<span class="avatar bg-red-lt">CD</span>
+<span class="avatar bg-yellow-lt">EF</span>
+<span class="avatar bg-primary-lt">GH</span>
+<span class="avatar bg-purple-lt">IJ</span>
+```
+
+## Avatar size
+
+Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
+
+```html example centered separated code
+<span class="avatar avatar-xl" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+<span class="avatar avatar-lg" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+<span class="avatar avatar-md" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+<span class="avatar" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+<span class="avatar avatar-sm" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+<span class="avatar avatar-xs" style="background-image: url(/samples/avatars/000m.jpg)"></span>
+```
+
+## Avatar status
+
+Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.
+
+```html example centered separated code
+<span class="avatar" style="background-image: url(/samples/avatars/018m.jpg)"></span>
+<span class="avatar" style="background-image: url(/samples/avatars/015m.jpg)">
+  <span class="badge bg-danger"></span>
+</span>
+<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
+  <span class="badge bg-success"></span>
+</span>
+<span class="avatar"><span class="badge bg-warning"></span>SA</span>
+<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
+  <span class="badge bg-info"></span>
+</span>
+<span class="avatar" style="background-image: url(/samples/avatars/048m.jpg)">
+  <span class="badge bg-gray">5</span>
+</span>
+```
+
+## Avatar shape
+
+Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
+
+```html example centered separated
+<span class="avatar" style="background-image: url(/samples/avatars/019m.jpg)"></span>
+<span class="avatar rounded" style="background-image: url(/samples/avatars/039f.jpg)"></span>
+<span class="avatar rounded-circle">AA</span>
+<span class="avatar rounded-0" style="background-image: url(/samples/avatars/043f.jpg)"></span>
+<span class="avatar rounded-3" style="background-image: url(/samples/avatars/044f.jpg)"></span>
+```
+
+## Avatars list
+
+Create a list of avatars within one parent container.
+
+```html example centered separated code
+<div class="avatar-list">
+  <span class="avatar rounded" style="background-image: url(/samples/avatars/031f.jpg)"></span>
+  <span class="avatar rounded">JL</span>
+  <span class="avatar rounded" style="background-image: url(/samples/avatars/033f.jpg)"></span>
+  <span class="avatar rounded" style="background-image: url(/samples/avatars/017m.jpg)"></span>
+  <span class="avatar rounded" style="background-image: url(/samples/avatars/024m.jpg)"></span>
+</div>
+```
+
+## Stacked list
+
+Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
+
+```html example centered separated code
+<div class="avatar-list avatar-list-stacked">
+  <span class="avatar">EB</span>
+  <span class="avatar" style="background-image: url(/samples/avatars/026m.jpg)"></span>
+  <span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
+  <span class="avatar" style="background-image: url(/samples/avatars/028m.jpg)"></span>
+  <span class="avatar" style="background-image: url(/samples/avatars/030m.jpg)"></span>
+  <span class="avatar">+8</span>
+</div>
+```
+
+```html example centered separated code
+<div class="avatar-list avatar-list-stacked">
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/035m.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/027f.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/036f.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle">SA</span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/034f.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/043f.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/039f.jpg)"></span>
+  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/020m.jpg)"></span>
+</div>
+```