Avatar

En rund flate med et bilde eller initialer. Komponenten sier ingenting om hvem personen er: det gjør teksten ved siden av, eller en tekst du gir bildet.

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/avatar/avatar.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<span class="fs-avatar" data-size="small" aria-hidden="true">ON</span>
<span class="fs-avatar" aria-hidden="true">ON</span>
<span class="fs-avatar" data-size="large" aria-hidden="true">ON</span>
<span class="fs-avatar" data-variant="square" aria-hidden="true">KB</span>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/avatar.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<span {...fs.avatar({ size: "small" })} aria-hidden="true">ON</span>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const bilde = document.querySelector<HTMLElement>("#profil")

fs.setAttributes(bilde, fs.avatar({ size: "large" }))

Lista som lar bildene overlappe har ingen attributter, bare en klasse, og den ligger på funksjonen:

<ul className={fs.avatar.stack}>
  <li><span {...fs.avatar({ size: "small" })} aria-hidden="true">ON</span></li>
</ul>

Attributt	Effekt
`data-size="small"`	Til en tabellrad eller en liste
(utelatt)	Ved siden av et navn
`data-size="large"`	På en profilside
`data-variant="square"`	Avrundet firkant, for logoer og virksomheter

<span class="fs-avatar" data-size="small" aria-hidden="true">ON</span>
<span>Ola Nordmann</span>

Står navnet der allerede, er bildet pynt. aria-hidden="true" hindrer at initialene leses opp som «O N» foran navnet.

Bildet og navnet er to elementer ved siden av hverandre. Hvordan de stilles opp er appens oppsett, ikke komponentens: en flex-rad med gap, en tabellcelle, eller hva siden ellers bruker.

Står bildet alene, må det si hvem det er:

<span class="fs-avatar">
  <img src="/bilder/ola.jpg" alt="Ola Nordmann" />
</span>

Flere bilder som overlapper

Eksempel
Ren HTML

<ul class="fs-avatar-stack">
<li><span class="fs-avatar" data-size="small" aria-hidden="true">ON</span></li>
<li><span class="fs-avatar" data-size="small" aria-hidden="true">KB</span></li>
<li><span class="fs-avatar" data-size="small" aria-hidden="true">MH</span></li>
</ul>
<p>Ola Nordmann, Kari Berg og Mats Hansen følger saken</p>

Rekkefølgen snus i CSS, så det første bildet ligger øverst uten at markupen må skrives baklengs. Navnene må stå et sted, som i teksten under: initialer er ingen identifikasjon.

Klasser du kan style

Klasse	Hva det er
`.fs-avatar`	Flaten med bildet eller initialene

Klasse	Hva det er
`.fs-avatar-stack`	Lista med bilder som overlapper

Variabel	Standard
`--fs-avatar-size`	`var(--fs-spacing-10)`
`--fs-avatar-radius`	`var(--fs-spacing-1)`
`--fs-avatar-stack-overlap`	`calc(var(--fs-spacing-2) * -1)`

--fs-avatar-radius gjelder bare firkantvarianten. Den runde er alltid rund. Se Tilpasning.

Tilgjengelighet

Initialer er ingen identifikasjon. To personer kan ha de samme, så navnet må stå et sted.
Et <img> uten alt leses opp som filnavnet. Er bildet pynt, skriv alt="".
Ikke la fargen på flaten bety noe. Den er tilfeldig for den som ikke ser den.