Avatar

component

The picture of a person, over the initials that show when it is missing or broken, without script.

Preview

Light

Code

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Dark

Code

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Try it

Change the props; the example is rendered again by the server.

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Variants

`size`

The avatar size.

Installation

php bin/console ux:install avatar --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`size`	`'default'\|'sm'\|'lg'`	`'default'`	The avatar size.

Accessibility

The picture takes the name of the person as its alt, or an empty one when the name is written next to it.

Files to copy

templates/components/Avatar.html.twig

{%- props
    ## 'default'|'sm'|'lg' The avatar size.
    size = 'default'
-%}
{%- set _size = {sm: ' isSmall', lg: ' isLarge'}[size] ?? '' -%}
<span data-slot="avatar" data-size="{{ size }}"{{ attributes.defaults({class: 'isAvatar' ~ _size}) }}>
{##- The avatar content, typically an image or `Avatar:Fallback`. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Badge.html.twig

<span data-slot="avatar-badge"{{ attributes.defaults({class: 'isAvatarBadge'}) }}>
{##- The badge content, typically an icon indicating status. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Fallback.html.twig

<span data-slot="avatar-fallback"{{ attributes.defaults({class: 'isAvatarFallback'}) }}>
{##- The fallback content displayed when no image is available, typically initials. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Group.html.twig

<div data-slot="avatar-group"{{ attributes.defaults({class: 'isAvatarGroup'}) }}>
{##- The grouped avatars, typically multiple `Avatar` components. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Avatar/GroupCount.html.twig

<div data-slot="avatar-group-count"{{ attributes.defaults({class: 'isAvatarGroupCount'}) }}>
{##- The count indicator showing number of additional avatars (e.g., "+3"). -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Avatar/Image.html.twig

<img data-slot="avatar-image"{{ attributes.defaults({class: 'isAvatarImage', alt: '', loading: 'lazy', decoding: 'async'}) }}>