Avatar · Style
Modifiers for color, size, and corner radius on the fallback and frame.
Hex doc
Phoenix
Color
A
![]()
B
![]()
C
![]()
D
![]()
E
![]()
<.avatar src="" class="avatar avatar--accent">
<:fallback>A</:fallback>
</.avatar>
<.avatar src="" class="avatar avatar--brand">
<:fallback>B</:fallback>
</.avatar>
Size
SM
MD
LG
XL
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--sm">
<:fallback>SM</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--md">
<:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--lg">
<:fallback>LG</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--xl">
<:fallback>XL</:fallback>
</.avatar>
Rounded
MD
0
SM
MD
LG
XL
●
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar">
<:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-none">
<:fallback>0</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-sm">
<:fallback>SM</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-md">
<:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-lg">
<:fallback>LG</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-xl">
<:fallback>XL</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-full">
<:fallback>●</:fallback>
</.avatar>