mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Fix invisible text on numeric avatar status example (#3038)
Closes #3033
This commit is contained in:
Bartosz-Do authored and 
GitHub committed
1 parent
127c56b2ae
commit
86ac4f11ab
2 files changed
+167
-124
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fixed the unreadable "5" badge in the avatar status docs example by adding `text-gray-100`.
|
||||
@@ -34,21 +34,22 @@ classnames:
|
||||
- class: avatar-{size}
|
||||
desc: From avatar-xxs to avatar-2xl; avatar-list-{size} sizes a whole list
|
||||
---
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
import AvatarList from '@ui/AvatarList.astro';
|
||||
import CodeDocs from '@components/CodeDocs.astro';
|
||||
|
||||
import Example from '@components/Example.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import AvatarList from '@ui/AvatarList.astro'
|
||||
import CodeDocs from '@components/CodeDocs.astro'
|
||||
|
||||
## Default markup
|
||||
|
||||
Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span>
|
||||
<span class="avatar">JL</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span>
|
||||
<span class="avatar">JL</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar image
|
||||
@@ -56,11 +57,11 @@ Add the `avatar` class to a `span`. Fill it with a picture as a `background-imag
|
||||
Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Initials
|
||||
@@ -68,13 +69,13 @@ Set the picture as a `background-image` on the avatar. It's cropped to the avata
|
||||
When there is no picture, put the initials as text inside the avatar.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<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>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<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>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar icons
|
||||
@@ -82,11 +83,17 @@ When there is no picture, put the initials as text inside the avatar.
|
||||
An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar"><Icon name="user" /></span>
|
||||
<span class="avatar"><Icon name="plus" /></span>
|
||||
<span class="avatar"><Icon name="settings" /></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar">
|
||||
<Icon name="user" />
|
||||
</span>
|
||||
<span class="avatar">
|
||||
<Icon name="plus" />
|
||||
</span>
|
||||
<span class="avatar">
|
||||
<Icon name="settings" />
|
||||
</span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar initials color
|
||||
@@ -94,13 +101,13 @@ An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for
|
||||
Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<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>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<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>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar size
|
||||
@@ -108,13 +115,13 @@ Set the background with a `bg-*` class from the [color palette](/ui/base/colors)
|
||||
Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar status
|
||||
@@ -122,22 +129,25 @@ Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual B
|
||||
Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/015m.jpg)">
|
||||
<span class="badge bg-danger"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/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(/static/avatars/022m.jpg)">
|
||||
<span class="badge bg-info"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/048m.jpg)">
|
||||
<span class="badge bg-gray-500">5</span>
|
||||
</span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/015m.jpg)">
|
||||
<span class="badge bg-danger"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/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(/static/avatars/022m.jpg)">
|
||||
<span class="badge bg-info"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/048m.jpg)">
|
||||
<span class="badge bg-gray-500 text-gray-100">5</span>
|
||||
</span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar shape
|
||||
@@ -145,21 +155,21 @@ Add a [status indicator](/ui/components/status) to show whether a user is online
|
||||
An avatar is a circle by default. Add `avatar-square` to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span>
|
||||
<span class="avatar avatar-square" style="background-image: url(/static/avatars/039f.jpg)"></span>
|
||||
<span class="avatar avatar-square bg-primary text-white">TB</span>
|
||||
<span class="avatar avatar-square bg-green-lt">AA</span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span>
|
||||
<span class="avatar avatar-square" style="background-image: url(/static/avatars/039f.jpg)"></span>
|
||||
<span class="avatar avatar-square bg-primary text-white">TB</span>
|
||||
<span class="avatar avatar-square bg-green-lt">AA</span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corners, and `rounded-3` a larger radius than `avatar-square`.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span>
|
||||
<span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span>
|
||||
<span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar brand
|
||||
@@ -167,14 +177,14 @@ For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corner
|
||||
Add a `avatar-brand` element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)">
|
||||
<span class="avatar-brand" style="background-image: url(/static/brands/github.svg)"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002m.jpg)">
|
||||
<span class="avatar-brand" style="background-image: url(/static/brands/google.svg)"></span>
|
||||
</span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)">
|
||||
<span class="avatar-brand" style="background-image: url(/static/brands/github.svg)"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002m.jpg)">
|
||||
<span class="avatar-brand" style="background-image: url(/static/brands/google.svg)"></span>
|
||||
</span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar on a cover
|
||||
@@ -182,16 +192,16 @@ Add a `avatar-brand` element inside an avatar to mark where the account comes fr
|
||||
Add `avatar-cover` to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image.
|
||||
|
||||
<Example>
|
||||
<div class="card" style="max-width: 20rem">
|
||||
<div class="card-body p-0">
|
||||
<div class="bg-primary-lt" style="height: 5rem"></div>
|
||||
<div class="text-center p-3">
|
||||
<span class="avatar avatar-xl avatar-cover rounded-circle mb-3" style="background-image: url(/static/avatars/039f.jpg)"></span>
|
||||
<div class="fw-medium">Paweł Kuna</div>
|
||||
<div class="text-secondary">UI Designer</div>
|
||||
<div class="card" style="max-width: 20rem">
|
||||
<div class="card-body p-0">
|
||||
<div class="bg-primary-lt" style="height: 5rem"></div>
|
||||
<div class="text-center p-3">
|
||||
<span class="avatar avatar-xl avatar-cover rounded-circle mb-3" style="background-image: url(/static/avatars/039f.jpg)"></span>
|
||||
<div class="fw-medium">Paweł Kuna</div>
|
||||
<div class="text-secondary">UI Designer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Avatar upload
|
||||
@@ -201,11 +211,17 @@ Use the `avatar-upload` class together with `avatar` to show an empty avatar slo
|
||||
Put an icon inside to show the action. The variant is often used as a link or a button.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload rounded-0" aria-label="Take photo"><Icon name="camera" /></a>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload rounded-0" aria-label="Take photo">
|
||||
<Icon name="camera" />
|
||||
</a>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar upload size
|
||||
@@ -213,13 +229,23 @@ Put an icon inside to show the action. The variant is often used as a link or a
|
||||
The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload avatar-2xl rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload avatar-xl rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload avatar-lg rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
<a href="#" class="avatar avatar-upload avatar-sm rounded" aria-label="Upload photo"><Icon name="plus" /></a>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload avatar-2xl rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload avatar-xl rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload avatar-lg rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload avatar-sm rounded" aria-label="Upload photo">
|
||||
<Icon name="plus" />
|
||||
</a>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar upload text
|
||||
@@ -227,16 +253,16 @@ The upload avatar uses the same size classes as a normal avatar, from `avatar-xx
|
||||
Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload avatar-xl rounded">
|
||||
<Icon name="plus" />
|
||||
<span class="avatar-upload-text">Upload</span>
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload avatar-2xl rounded">
|
||||
<Icon name="camera" />
|
||||
<span class="avatar-upload-text">Add photo</span>
|
||||
</a>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<a href="#" class="avatar avatar-upload avatar-xl rounded">
|
||||
<Icon name="plus" />
|
||||
<span class="avatar-upload-text">Upload</span>
|
||||
</a>
|
||||
<a href="#" class="avatar avatar-upload avatar-2xl rounded">
|
||||
<Icon name="camera" />
|
||||
<span class="avatar-upload-text">Add photo</span>
|
||||
</a>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Avatar upload in a form
|
||||
@@ -244,18 +270,20 @@ Add a short label under the icon with the `avatar-upload-text` class. The conten
|
||||
To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links.
|
||||
|
||||
<Example>
|
||||
<div class="row align-items-end" style="width: 100%;">
|
||||
<div class="col-auto">
|
||||
<label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer">
|
||||
<Icon name="plus" />
|
||||
</label>
|
||||
<input type="file" id="avatar-file" class="visually-hidden" accept="image/*" />
|
||||
<div class="row align-items-end" style="width: 100%;">
|
||||
<div class="col-auto">
|
||||
<label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer">
|
||||
<Icon name="plus" />
|
||||
</label>
|
||||
<input type="file" id="avatar-file" class="visually-hidden" accept="image/*" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label" for="avatar-file">
|
||||
Avatar
|
||||
</label>
|
||||
<div class="text-secondary">Click to upload a new avatar</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label" for="avatar-file">Avatar</label>
|
||||
<div class="text-secondary">Click to upload a new avatar</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Avatar list
|
||||
@@ -263,13 +291,13 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
|
||||
Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span>
|
||||
<span class="avatar rounded">JL</span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span>
|
||||
</AvatarList>
|
||||
<AvatarList>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span>
|
||||
<span class="avatar rounded">JL</span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span>
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Stacked list
|
||||
@@ -277,11 +305,21 @@ Put several avatars in an `.avatar-list` container. It keeps consistent spacing
|
||||
Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.
|
||||
|
||||
<Example centered>
|
||||
<AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList>
|
||||
<AvatarList stacked={true}>
|
||||
{' '}
|
||||
<span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span>{' '}
|
||||
<span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span>{' '}
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<AvatarList stacked={true}> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </AvatarList>
|
||||
<AvatarList stacked={true}>
|
||||
{' '}
|
||||
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)"></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)"></span>{' '}
|
||||
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)"></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)"></span>{' '}
|
||||
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)"></span>{' '}
|
||||
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)"></span>{' '}
|
||||
</AvatarList>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
Reference in new issue
Block a user