Avatar stack

A group of people in a compact row.

Grouped

AL AN MO +2

<div class="<%= avatar_stack_class %>">
  <div class="<%= avatar_stack_row_class %>">
    <% { "AL" => "sky", "AN" => "leaf", "MO" => "berry", "+2" => "gold" }.each do |initials, color| %>
      <span class="<%= avatar_class %>" style="background-color: var(--<%= color %>)"><%= initials %></span>
    <% end %>
  </div>
</div>

Compact

AL AN MO +2

<div class="<%= avatar_stack_class(compact: true) %>">
  <div class="<%= avatar_stack_row_class %>">
    <% { "AL" => "sky", "AN" => "leaf", "MO" => "berry", "+2" => "gold" }.each do |initials, color| %>
      <span class="<%= avatar_class %>" style="background-color: var(--<%= color %>)"><%= initials %></span>
    <% end %>
  </div>
</div>

API reference

avatar_class

avatar_class(size: :base, ink: false, linked: false, extra: nil)

Parameter	Default	Values
size	:base	:base · :lg · :sm · :xl
ink	false	true · false
linked	false	true · false
extra	nil	Additional Tailwind classes

avatar_stack_class

avatar_stack_class(compact: false, extra: nil)

Parameter	Default	Values
compact	false	true · false
extra	nil	Additional Tailwind classes

avatar_stack_row_class

avatar_stack_row_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes