x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Default --><div class="avatar"> <img alt="CN" src="/assets/cartoon-93de1535.jpg" width="32" height="32" /></div><!-- Button --><button type="button" class="btn avatar"> <img alt="CN" src="/assets/cartoon-93de1535.jpg" width="32" height="32" /></button><!-- Fallback --><div class="avatar"> <span role="img" aria-label="Avatar with initials CN">CN</span></div><!-- Group --><div class="avatar-group"> <span class="avatar"><img alt="CN" src="/assets/cartoon-93de1535.jpg" width="32" height="32" /></span> <span class="avatar"><img alt="LN" src="/assets/lazaronixon-0f93f06b.jpg" width="32" height="32" /></span> <span class="avatar"><img alt="EM" src="/assets/elon-09bae285.jpg" width="32" height="32" /></span></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%# Default %><div class="avatar"> <%= image_tag "cartoon.jpg", size: 32, alt: "CN" %></div><%# Button %><button type="button" class="btn avatar"> <%= image_tag "cartoon.jpg", size: 32, alt: "CN" %></button><%# Fallback %><div class="avatar"> <%= tag.span "CN", role: "img", aria: { label: "Avatar with initials CN" } %></div><%# Group %><div class="avatar-group"> <span class="avatar"><%= image_tag "cartoon.jpg", size: 32, alt: "CN" %></span> <span class="avatar"><%= image_tag "lazaronixon.jpg", size: 32, alt: "LN" %></span> <span class="avatar"><%= image_tag "elon.jpg", size: 32, alt: "EM" %></span></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.avatar { --avatar-radius: var(--rounded-full); --avatar-size: var(--size-8); block-size: var(--avatar-size); border-radius: var(--avatar-radius); display: flex; flex-shrink: 0; inline-size: var(--avatar-size); overflow: hidden; &.btn { --btn-inline-size: var(--avatar-size); --btn-padding: 0; --btn-radius: var(--avatar-radius); } &.btn:hover { filter: var(--brightness-90); } img { aspect-ratio: var(--aspect-square); block-size: var(--size-full); inline-size: var(--size-full); object-fit: cover; } span[role="img"] { align-items: center; background-color: var(--color-border-light); block-size: var(--size-full); border-radius: var(--avatar-radius); display: flex; font-size: calc(var(--avatar-size) * .4); inline-size: var(--size-full); justify-content: center; user-select: none; }}.avatar-group { align-items: center; display: flex; > .avatar { box-shadow: 0 0 0 var(--size-0_5) var(--color-bg); } > :not(:last-child) { margin-inline-end: calc(var(--size-2) * -1); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.