{% load static %}

<div class="flex items-center gap-4">
  <c-lb.avatar rounded="xs" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra small rounded avatar" />
  <c-lb.avatar rounded="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Small rounded avatar" />
  <c-lb.avatar rounded="md" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Medium rounded avatar" />
  <c-lb.avatar rounded="lg" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Large rounded avatar" />
  <c-lb.avatar rounded="xl" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra large rounded avatar" />
  <c-lb.avatar rounded="full" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Fully rounded avatar" />
</div>
