Avatar
A person's or organisation's picture, falling back to initials on one of six tints picked from the name — the same tint for the same name on every page and every server.
Sizes and fallbacks
Three sizes, with and without an image. A broken image shows the initials through it.
<div class="flex items-center gap-4">
<%= avatar "Ada Lovelace", size: :small %>
<%= avatar "Ada Lovelace" %>
<%= avatar "Ada Lovelace", size: :large %>
<%= avatar "Grace Hopper", size: :large, src: "/missing-picture.png" %>
<%= avatar "Acme Ltd", size: :large, shape: :square %>
<%= avatar "Ada Lovelace", size: :large, skeleton: true %>
</div>Tints
The tint comes from the name, so each person keeps their colour. tint: false is neutral.
<div class="flex flex-wrap items-center gap-3">
<% [ "Ada Lovelace", "Grace Hopper", "Katherine Johnson", "Alan Turing", "Margaret Hamilton",
"Dennis Ritchie", "Barbara Liskov", "Ken Thompson" ].each do |name| %>
<%= avatar name %>
<% end %>
<%= avatar "Neutral Person", tint: false %>
</div>A group
avatar_group stacks them, collapsing past max: into a counter that names the rest.
+3
<%= avatar_group max: 3 do |group| %>
<% [ "Ada Lovelace", "Grace Hopper", "Katherine Johnson", "Alan Turing", "Margaret Hamilton", "Barbara Liskov" ].each do |name| %>
<% group.avatar name %>
<% end %>
<% end %>