Avatar

<%=
  render(Zui::Avatar.new(src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture"))
%>
<%# Using the helper for brevity %>
<%= zui("avatar", text: "Z") %>
<%= zui("avatar", text: "ZU") %>
<%= zui("avatar") { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", contrast: :high) %>

<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture") %>
<%= zui("avatar", text: "Z", variant: :solid) %>
<%= zui("avatar", text: "ZU", variant: :solid) %>
<%= zui("avatar", variant: :solid) { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", variant: :solid, contrast: :high) %>

<%=
  render(Zui::Avatar.new(src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture"))
%>
<%= zui("avatar", text: "Z", color: :gray) %>
<%= zui("avatar", text: "ZU", color: :gray) %>
<%= zui("avatar", color: :gray) { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", contrast: :high, color: :gray) %>

<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture") %>
<%= zui("avatar", text: "Z", variant: :solid, color: :gray) %>
<%= zui("avatar", text: "ZU", variant: :solid, color: :gray) %>
<%= zui("avatar", variant: :solid, color: :gray) { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", variant: :solid, contrast: :high, color: :gray) %>

<%=
  render(Zui::Avatar.new(src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", shape: :square))
%>
<%= zui("avatar", text: "Z", shape: :square) %>
<%= zui("avatar", text: "ZU", shape: :square) %>
<%= zui("avatar", shape: :square) { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", contrast: :high, shape: :square) %>

<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", shape: :square) %>
<%= zui("avatar", text: "Z", variant: :solid, shape: :square) %>
<%= zui("avatar", text: "ZU", variant: :solid, shape: :square) %>
<%= zui("avatar", variant: :solid, shape: :square) { zui_icon("user", class: "h-5 w-5") } %>
<%= zui("avatar", text: "Z", variant: :solid, contrast: :high, shape: :square) %>

<div class="flex gap-4 items-center mb-5">
<%= zui("avatar", src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", size: :s) %>
<%= zui("avatar", src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", size: :m) %>
<%= zui("avatar", src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", size: :l) %>
<%= zui("avatar", src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", size: :xl) %>
<%= zui("avatar", src: image_path("profiles/profile-2.jpg"), alt: "Profile Picture", size: :xxl, class: "hidden sm:inline-block") %>
</div>

<div class="flex gap-4 items-center mb-5">
<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", size: :s, shape: :square) %>
<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", size: :m, shape: :square) %>
<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", size: :l, shape: :square) %>
<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", size: :xl, shape: :square) %>
<%= zui("avatar", src: image_path("profiles/profile-3.jpg"), alt: "Profile Picture", size: :xxl, shape: :square, class: "hidden sm:inline-block") %>
</div>

<div class="flex gap-4 items-center mb-5">
<%= zui("avatar", text: "Z", size: :s) %>
<%= zui("avatar", text: "Z", size: :m) %>
<%= zui("avatar", text: "Z", size: :l) %>
<%= zui("avatar", text: "Z", size: :xl) %>
<%= zui("avatar", text: "Z", size: :xxl, class: "hidden sm:inline-block") %>
</div>

<div class="flex gap-4 items-center mb-5">
<%= zui("avatar", text: "Z", size: :s, shape: :square) %>
<%= zui("avatar", text: "Z", size: :m, shape: :square) %>
<%= zui("avatar", text: "Z", size: :l, shape: :square) %>
<%= zui("avatar", text: "Z", size: :xl, shape: :square) %>
<%= zui("avatar", text: "Z", size: :xxl, shape: :square, class: "hidden sm:inline-block") %>
</div>