Avatar

[jeffreylauwers]

We willen graag meer leren over de Avatar component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Avatar

Doel

Een afbeelding die een identiteit vertegenwoordigt, meestal in de vorm van een foto, illustratie, of initialen.

Gerelateerde componenten

Figure

Onderzoek

Niet veel onderzoek kunnen vinden rondom de Avatar component.

Accessibility of Profile Pictures: Alt Text and Beyond to Express Identity Online - ACM Digital Library
Video over een onderzoek naar de toegankelijkheid van profielfoto’s. Uit het onderzoek blijkt dat gedetailleerde afbeeldingsbeschrijvingen en door gebruikers geschreven alt-teksten schermlezergebruikers een prettigere en meer informatieve ervaring kunnen bieden bij het bekijken van profielfoto’s.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

{Omgeving}

Default

With picture
The Avatar can also display a photo or other image for the person. Make sure to scale the image down to around 100 pixels to prevent unnecessary data transfers.

Fallback icon
A user icon displays if no label and image are provided.

In a header

---

Notities

• Kan een label, foto of een icoon bevatten.
• Label bestaat uit initialen en bevat maximaal 2 letters.
• Kan bestaan uit verschillende background-colors.
• Is beschikbaar in 1 formaat waarvan de grootte wordt bepaald door de regelhoogte (1,6) van de font-size level-6.

[Rozerinay]

Den Haag

Figma - WIP

---

Screenshots / Varianten

Text

Photo

Icon

---

Notities

• Alleen beschikbaar in design en niet in code.
• Kan een label, foto of een icoon bevatten.
• Label bevat maximaal 2 letters.
• Is beschikbaar in 1 formaat.

[Rozerinay]

Utrecht

Figma

---

Screenshots / Varianten

Text

Photo

Icon

Notities

• Alleen beschikbaar in design en niet in code.
• Kan een label, foto of een icoon bevatten.
• Label bevat maximaal 2 letters.
• Is beschikbaar in 1 formaat.

[Robbert]

developer.overheid.nl

https://developer.overheid.nl/repositories/amsterdam-pydantic-media-type-25698

<img class="size-16" src="https://avatars.githubusercontent.com/u/33843588?v=4" alt="Avatar van amt">

<div class="card__body">
        <div class="card__avatar">
            <img src="https://avatars.githubusercontent.com/u/14022058?v=4" alt="Avatar van pydantic-media-type">
        </div>
        <div class="card__left card__left--full-width">…</div>
    </div>

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Avatar op het Community bord