Avatar
Iniciales o imagen, 5 tamaños, variante brand. Se apilan con el wrapper .ok-avatar-stack.
<span class="avatar">
<span class="avatar-initials">JC</span></span>
{% from "avatar.jinja" import avatar %}
{{ avatar("JC") }}
<Avatar label="JC" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<span class="avatar xs">
<span class="avatar-initials">JC</span></span>
<span class="avatar sm">
<span class="avatar-initials">JC</span></span>
<span class="avatar">
<span class="avatar-initials">JC</span></span>
<span class="avatar lg">
<span class="avatar-initials">JC</span></span>
<span class="avatar xl">
<span class="avatar-initials">JC</span></span>
{% from "avatar.jinja" import avatar %}
{{ avatar("JC", size="xs") }}
{{ avatar("JC", size="sm") }}
{{ avatar("JC") }}
{{ avatar("JC", size="lg") }}
{{ avatar("JC", size="xl") }}
<Avatar label="JC" size="xs" />
<Avatar label="JC" size="sm" />
<Avatar label="JC" />
<Avatar label="JC" size="lg" />
<Avatar label="JC" size="xl" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<span class="avatar">
<span class="avatar-initials">MR</span></span>
<span class="avatar brand">
<span class="avatar-initials">EX</span></span>
<span class="avatar lg brand">
<span class="avatar-initials">EX</span></span>
{% from "avatar.jinja" import avatar %}
{{ avatar("MR") }}
{{ avatar("EX", variant="brand") }}
{{ avatar("EX", variant="brand", size="lg") }}
<Avatar label="MR" />
<Avatar label="EX" variant="brand" />
<Avatar label="EX" variant="brand" size="lg" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<span class="avatar">
<span class="avatar-initials">MA</span><img src="https://i.pravatar.cc/64?u=maria" alt="María" onerror="this.remove()"/></span>
<span class="avatar lg">
<span class="avatar-initials">JN</span><img src="https://i.pravatar.cc/64?u=joan" alt="Joan" onerror="this.remove()"/></span>
<span class="avatar xl">
<span class="avatar-initials">EL</span><img src="https://i.pravatar.cc/64?u=elena" alt="Elena" onerror="this.remove()"/></span>
{% from "avatar.jinja" import avatar %}
{{ avatar("MA", src="https://i.pravatar.cc/64?u=maria", alt="María") }}
{{ avatar("JN", src="https://i.pravatar.cc/64?u=joan", alt="Joan", size="lg") }}
{{ avatar("EL", src="https://i.pravatar.cc/64?u=elena", alt="Elena", size="xl") }}
<Avatar label="MA" src="https://i.pravatar.cc/64?u=maria" alt="María" />
<Avatar label="JN" src="https://i.pravatar.cc/64?u=joan" alt="Joan" size="lg" />
<Avatar label="EL" src="https://i.pravatar.cc/64?u=elena" alt="Elena" size="xl" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<span class="avatar-stack">
<span class="avatar">
<span class="avatar-initials">MA</span><img src="https://i.pravatar.cc/64?u=maria" alt="María" onerror="this.remove()"/></span>
<span class="avatar">
<span class="avatar-initials">JN</span><img src="https://i.pravatar.cc/64?u=joan" alt="Joan" onerror="this.remove()"/></span>
<span class="avatar">
<span class="avatar-initials">EL</span><img src="https://i.pravatar.cc/64?u=elena" alt="Elena" onerror="this.remove()"/></span>
<span class="avatar more">
<span class="avatar-initials">+4</span></span>
</span>
{% from "avatar.jinja" import avatar %}
<span class="avatar-stack">
{{ avatar("MA", src="https://i.pravatar.cc/64?u=maria", alt="María") }}
{{ avatar("JN", src="https://i.pravatar.cc/64?u=joan", alt="Joan") }}
{{ avatar("EL", src="https://i.pravatar.cc/64?u=elena", alt="Elena") }}
{{ avatar("+4", variant="more") }}
</span>
<span class="avatar-stack">
<Avatar label="MA" src="https://i.pravatar.cc/64?u=maria" alt="María" />
<Avatar label="JN" src="https://i.pravatar.cc/64?u=joan" alt="Joan" />
<Avatar label="EL" src="https://i.pravatar.cc/64?u=elena" alt="Elena" />
<Avatar label="+4" variant="more" />
</span>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
label | str | — | Iniciales (fallback cuando no hay imagen). |
src | str|None | None | URL de la imagen. Si está, sustituye al label. |
alt | str | "" | Alt text de la imagen. |
size | "xs"|"sm"|"md"|"lg"|"xl" | "md" | Tamaño. |
variant | "brand"|None | None | Variante con fondo brand. |
attrs | dict | {} | Atributos HTML extra. |
JN
EL