Logo

Logo — norsk og engelsk

Bruk alltid logokomponenten for å vise Artsdatabankens identitet. Komponenten <adb-logo> kombinerer logosymbolet (lundefugl) og navnetrekket side om side. For sosiale medier og kompakte flater finnes <adb-avatar> som viser kun symbolet.

Retningslinjer for bruk

Bruk alltid <adb-logo> (med både logosymbol og navnetrekk) når det er plass til det.

Logo som lenke

Dersom logoen skal lenke til noe, må brukeren få en tydelig respons på at den er klikkbar. Sett href-attributtet – komponenten viser en understrek under hele logoen ved hover, fokus-ring ved tastaturnavigasjon, og et tooltip (title) som forteller brukeren hva lenken peker til.

Logo som lenke — hover for å se understrek og tooltip

Sosiale medier — Avatar

På sosiale medier og i apper der plassen er begrenset, brukes <adb-avatar> (kun logosymbolet). Komponenten støtter fire bakgrunnsvarianter.

Avatar-varianter

Størrelser

Norsk — sm / md / lg

Engelsk — sm / md / lg

Mørkt tema

Logosymbolets mørke flater bruker currentColor og tilpasser seg automatisk mørk modus. Det røde aksent-kvadratet er alltid korallfarge uavhengig av tema.

Teknisk implementering og universell utforming

Logoen er ett innebygd SVG-element med aria-hidden="true" — navnetrekket er del av SVG-en og leses som helhet av skjermlesere via lenkens synlige tekst.

For <adb-avatar> (ingen synlig tekst) har SVG-en role="img" og aria-label:

«Artsdatabankens logo. Illustrasjon av hodet til en lundefugl i et forenklet uttrykk.»

Når logoen brukes som lenke (href), er det viktig at:

1. Tooltip (title) forklarer destinasjonen (komponenten setter en automatisk standard)
2. Fokus-ringen er tydelig synlig (4 px solid, --adb-focus-outer)
3. Understrek vises under hele logoen ved hover

<adb-logo> API

Egenskap	Type	Standard	Beskrivelse
href	string	—	Gjør logoen til en lenke (<a href="...">)
language	'nb' | 'nn' | 'en'	'nb'	Språkvariant — påvirker navnetrekket
size	'sm' | 'md' | 'lg'	'md'	Størrelse
tooltip	string	Auto	Overstyr tooltip-teksten (brukes kun når href er satt)

CSS-deler: logo (SVG-wrapper), link (<a>-elementet, kun når href er satt)

<adb-avatar> API

Egenskap	Type	Standard	Beskrivelse
background	'none' | 'square' | 'rounded' | 'circle'	'none'	Bakgrunnsform
size	'sm' | 'md' | 'lg'	'md'	Størrelse

CSS-deler: symbol, background

Eksempelkode

<!-- Standard logo -->
<adb-logo></adb-logo>

<!-- Logo som lenke til forsiden -->
<adb-logo href="https://artsdatabanken.no"></adb-logo>

<!-- Engelsk variant -->
<adb-logo language="en" size="lg"></adb-logo>

<!-- Avatar for sosiale medier (rundet bakgrunn) -->
<adb-avatar background="rounded"></adb-avatar>

// Individuell import (tree-shaking)
import '@artsdatabanken/components/logo';
import '@artsdatabanken/components/avatar';