Components
Avatar
Avatar
Guidelines for common avatar shapes and sizes.
Rounded
<!-- size-8 -->
<img class="size-8 rounded-md object-cover" alt="Avatar" src="https://randomuser.me/api/portraits/men/35.jpg" />
<!-- size-12 -->
<img class="size-12 rounded-md object-cover" alt="Avatar" src="https://randomuser.me/api/portraits/men/35.jpg" />
<!-- size-16 -->
<img class="size-16 rounded-md object-cover" alt="Avatar" src="https://randomuser.me/api/portraits/men/35.jpg" />
<!-- size-20 -->
<img class="size-20 rounded-md object-cover" alt="Avatar" src="https://randomuser.me/api/portraits/men/35.jpg" />
<!-- size-24 -->
<img class="size-24 rounded-md object-cover" alt="Avatar" src="https://randomuser.me/api/portraits/men/35.jpg" /><!-- size-8 -->
<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-8 rounded-md object-cover", alt: "Avatar" %>
<!-- size-12 -->
<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-12 rounded-md object-cover", alt: "Avatar" %>
<!-- size-16 -->
<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-16 rounded-md object-cover", alt: "Avatar" %>
<!-- size-20 -->
<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-20 rounded-md object-cover", alt: "Avatar" %>
<!-- size-24 -->
<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-24 rounded-md object-cover", alt: "Avatar" %>/ size-8
\<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-8 rounded-md object-cover", alt: "Avatar" %>
/ size-12
\<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-12 rounded-md object-cover", alt: "Avatar" %>
/ size-16
\<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-16 rounded-md object-cover", alt: "Avatar" %>
/ size-20
\<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-20 rounded-md object-cover", alt: "Avatar" %>
/ size-24
\<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-24 rounded-md object-cover", alt: "Avatar" %>Circle
<!-- size-8 -->
<img class="size-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/50.jpg" />
<!-- size-12-->
<img class="size-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/50.jpg" />
<!-- size-16-->
<img class="size-16 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/50.jpg" />
<!-- size-20-->
<img class="size-20 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/50.jpg" />
<!-- size-24-->
<img class="size-24 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/50.jpg" /><!-- size-8 -->
<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-8 rounded-full object-cover" %>
<!-- size-12-->
<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-12 rounded-full object-cover" %>
<!-- size-16-->
<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-16 rounded-full object-cover" %>
<!-- size-20-->
<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-20 rounded-full object-cover" %>
<!-- size-24-->
<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-24 rounded-full object-cover" %>/ size-8
\<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-8 rounded-full object-cover" %>
/ size-12
\<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-12 rounded-full object-cover" %>
/ size-16
\<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-16 rounded-full object-cover" %>
/ size-20
\<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-20 rounded-full object-cover" %>
/ size-24
\<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-24 rounded-full object-cover" %>