{% load static %}

<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Wide Spacing (wide)</h3>
    <c-lb.avatar.group spacing="wide">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Normal Spacing (normal)</h3>
    <c-lb.avatar.group spacing="normal">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tight Spacing (tight) - Default</h3>
    <c-lb.avatar.group spacing="tight">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tighter Spacing (tighter)</h3>
    <c-lb.avatar.group spacing="tighter">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tightest Spacing (tightest)</h3>
    <c-lb.avatar.group spacing="tightest">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>
</div>