Avatar
Accent
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
<%= 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) %>
Gray
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
<%= 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) %>
Square
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
<%= 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) %>
Sizes
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-2-a98bbcb0a81ed96354250b499478bdaaa9244dc3.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
![Profile Picture](https://assets.zestui.com/assets/profiles/profile-3-61c0bbdbdf6345de74fd5d086819b0d5d63fc10e.jpg)
Z
Z
Z
Z
Z
Z
Z
Z
Z
Z
<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>
Arguments
Argument | Values | Default | Notes |
---|---|---|---|
variant | :solid, :soft | :soft | |
color | :accent, :gray | :accent | |
contrast | :regular, :high | :regular | |
shape | :round, :square | :round | |
size | :s, :m, :l, :xl, :xxl | :m | |
src | |||
text | |||
alt |