@artsdatabanken/components

Web Components for the Artsdatabanken design system — built with Lit, works in Angular, React 19+, Drupal, and any framework that supports custom elements.

Installasjon

npm install @artsdatabanken/components @artsdatabanken/tokens

Bruk

Importer tokens globalt i CSS:

@import '@artsdatabanken/tokens';

Registrer komponenter i JavaScript:

import '@artsdatabanken/components';

Eller importer kun det du trenger:

import '@artsdatabanken/components/button';

Bruk i HTML:

<adb-button variant="primary" color="accent">Lagre</adb-button>

Komponenter

<adb-button>

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Visuell vekt | | color | 'accent' \| 'danger' | 'accent' | Fargetema (ignoreres for tertiary) | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | href | string | — | Når satt, rendres <a> i stedet for <button> | | target | '_self' \| '_blank' \| '_parent' \| '_top' | — | Lenke-mål (kun med href) | | download | string | — | Filnavn for nedlasting (kun med href) | | rel | string | — | Lenkerelasjoner (auto noopener noreferrer ved _blank) | | aria-controls | string | — | ID-en til elementet knappen styrer | | aria-expanded | 'true' \| 'false' | — | Om det kontrollerte elementet er åpent |

Slots:

| Slot | Beskrivelse | |---|---| | (default) | Knappetekst | | icon-start | Ikon før teksten | | icon-end | Ikon etter teksten |

CSS Parts:

• base — det indre <button>-elementet, for tilpasning via ::part(base)

Eksempler:

<!-- Primærknapp -->
<adb-button>Send inn</adb-button>

<!-- Sekundær fareknapp -->
<adb-button variant="secondary" color="danger">Slett</adb-button>

<!-- Lenkeknapp — rendrer <a> internt -->
<adb-button href="/artskart" variant="secondary">Gå til Artskart</adb-button>

<adb-icon-button>

Sirkulær ikon-only knapp. aria-label er påkrevd.

import '@artsdatabanken/components/icon-button';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Visuell vekt | | color | 'accent' \| 'danger' | 'accent' | Fargetema | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | aria-label | string | — | Påkrevd — beskriver handlingen |

<adb-icon-button aria-label="Lukk dialog">
  <adb-icon name="close"></adb-icon>
</adb-icon-button>

<adb-minimal-button>

Transparent ikonknapp for verktøylinjer og mindre fremtredende handlinger.

import '@artsdatabanken/components/minimal-button';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'default' \| 'attention' | 'default' | Default (accent) eller Attention (fare) | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | aria-label | string | — | Påkrevd — beskriver handlingen |

<adb-minimal-button aria-label="Søk">
  <adb-icon name="search"></adb-icon>
</adb-minimal-button>

<adb-accordion> / <adb-accordion-item>

Trekkspill bygget på native <details>/<summary>.

import '@artsdatabanken/components/accordion';
import '@artsdatabanken/components/accordion-item';

<adb-accordion> (wrapper):

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'neutral' \| 'subtle' | 'neutral' | Visuell stil |

<adb-accordion-item> (element):

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | heading | string | — | Overskriftstekst | | help-text | string | — | Sekundærtekst etter overskriften | | open | boolean | false | Om elementet er utvidet |

Slots: heading, help-text, badge, (default).

CSS-variabler (<adb-accordion-item>):

| Variabel | Standard | Beskrivelse | |---|---|---| | --adb-accordion-summary-padding | var(--adb-spacing-sm) | Luft rundt summary-raden | | --adb-accordion-content-padding-inline-start | var(--adb-spacing-md) | Innrykk på startsiden av innholdet | | --adb-accordion-content-padding-inline-end | var(--adb-accordion-summary-padding) | Innrykk på sluttsiden av innholdet. Følger summary-luften slik at badges og innhold deler samme høyrekant | | --adb-accordion-content-padding-block-end | var(--adb-spacing-lg) | Luft under innholdet |

Nøstede trekkspill arver 0 som innrykk på sluttsiden, siden forelderens innholdsboks allerede står for luften. Uten dette ville innrykket lagt seg oppå hverandre for hvert nivå, og badges ville forskjøvet seg mot venstre nedover i hierarkiet. Luften under innholdet (--adb-accordion-content-padding-block-end) arver også 0 for nøstede elementer, slik at den ikke bygger seg opp under hvert utvidet nivå.

<adb-accordion>
  <adb-accordion-item heading="Overskrift" help-text="hjelpetekst">
    <span slot="badge">42</span>
    <p>Innhold som vises når elementet er åpent.</p>
  </adb-accordion-item>
</adb-accordion>

<adb-alert>

Varsel-komponent for tilbakemeldinger — feil, advarsler, info, suksess og nøytrale meldinger.

import '@artsdatabanken/components/alert';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'danger' \| 'warning' \| 'info' \| 'success' \| 'neutral' | 'info' | Semantisk variant | | type | 'default' \| 'inline' | 'default' | Boks (default) eller inline | | size | 'sm' \| 'md' | 'md' | Størrelse (kun inline) | | heading | string | '' | Overskrift | | global | boolean | false | Kant-til-kant (ingen border-radius) | | closable | boolean | false | Vis lukkeknapp | | auto-close | boolean | false | Skjul ved lukking |

Slots: heading, meta (Space Mono 12px), default (brødtekst)

Events: adb-close — utløses ved klikk på lukkeknappen

<adb-alert variant="warning" closable heading="Planlagt vedlikehold">
  <span slot="meta">31. januar 2025 kl. 08:00</span>
  <p>Tjenesten vil være utilgjengelig i perioden 08:00–10:00.</p>
</adb-alert>

<!-- Inline -->
<adb-alert variant="success" type="inline" heading="Sitering kopiert"></adb-alert>

<adb-card>

Generisk kort-komponent som dekker alle korttyper fra Figma (Editorial, Handbook, Species, Nature, Contact) via komposisjon av slots — ingen egne komponenter per korttype. Hele kortet blir klikkbart når href er satt (CSS "stretched link", ingen JavaScript påkrevd).

import '@artsdatabanken/components/card';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | overline | string | — | Liten etikett over tittelen | | heading | string | — | Korttittel | | heading-level | number (2–6) | 3 | Overskriftsnivå (<h2>–<h6>) | | subtitle | string | — | Sekundærtekst under tittelen | | href | string | — | URL kortet lenker til — gjør hele kortet klikkbart | | orientation | 'vertical' \| 'horizontal' \| 'auto' | 'vertical' | Plassering av media relativt til tekst. auto gjør kortet container-responsivt | | auto-breakpoint | number (px) | 480 | Kortbredden der orientation="auto" bytter fra vertikal til horisontal | | media-fit | 'cover' \| 'contain' \| 'none' | 'cover' | Hvordan innholdet i media-sloten fyller mediecontaineren | | media-background | 'subtle' \| 'none' | 'subtle' | Sett none for å fjerne bakgrunnsplaten bak transparente ikoner/illustrasjoner | | overline-case | 'capitalize' \| 'none' \| 'uppercase' \| 'lowercase' | 'capitalize' | Bokstavsetting på overline. Bruk none for å beholde setningscase | | media-max-width | string (CSS-lengde) | — | Setter maksbredde på mediecontaineren i horisontal orientering (f.eks. 132px), begrenset til maks 50 % av kortet. Uten verdi bestemmer bildet bredden (fortsatt maks 50 %) | | size | 'lg' \| 'md' \| 'sm' | 'lg' | Skalerer padding, skrift og medieutsnitt |

Slots: overline-icon, overline, heading, subtitle, media, media-badge, footer.

CSS Parts: card, overline, title, subtitle, footer, media.

CSS-variabler: --adb-card-media-padding — innvendig luft i mediecontaineren (standard 0, eller --adb-spacing-md når media-fit="none").

Komponenten setter selv attributtet resolved-orientation (vertical | horizontal) på verten. Det er skrivebeskyttet, men kan brukes til å style mot den orienteringen som faktisk gjelder når orientation="auto" er i bruk.

<adb-card overline="Rovdyr" heading="Gaupe" subtitle="Lynx lynx" href="/arter/gaupe">
  <img slot="media" src="/bilder/gaupe.jpg" alt="" />
  <p slot="footer">Brødtekst med eget innhold …</p>
</adb-card>

<!-- Horisontal (kontaktkort/ansattkort) -->
<adb-card orientation="horizontal" media-max-width="132px" heading="Ane Myhre" subtitle="Seniorrådgiver" href="/ansatte/ane-myhre">
  <img slot="media" src="/bilder/ane.jpg" alt="" />
</adb-card>

<!-- Container-responsivt: vertikalt i smal kontekst, horisontalt i bred -->
<adb-card orientation="auto" heading="Gaupe" subtitle="Lynx lynx" href="/arter/gaupe">
  <img slot="media" src="/bilder/gaupe.jpg" alt="" />
</adb-card>

<!-- Ikon i stedet for foto: naturlig størrelse, ingen bakgrunnsplate -->
<adb-card media-fit="none" media-background="none" overline-case="none"
          overline="Artsprosjektet" heading="Om prosjektet" href="/artsprosjektet">
  <svg slot="media" width="48" height="48" aria-hidden="true"><!-- … --></svg>
</adb-card>

orientation="auto" måler kortets egen bredde med en ResizeObserver og bytter mellom vertikal og horisontal ved auto-breakpoint (480 px som standard). Da kan samme kortmarkup brukes både i hovedspalten og i en smal sidekolonne uten å hardkode orientering per bruksområde. Uten ResizeObserver (f.eks. ved SSR) faller auto tilbake til vertikal.

Standard media-fit="cover" beskjærer foto til å fylle mediecontaineren. Bruk contain for illustrasjoner som skal vises i sin helhet, og none for ikoner som skal beholde sin naturlige størrelse og sentreres — da settes ikke lenger et fast bildeformat på mediecontaineren. Kombiner gjerne med media-background="none" for transparente ikoner.

I horisontal orientering bestemmer bildets egen størrelse mediebredden som standard, men mediet tar aldri mer enn 50 % av kortbredden. Sett media-max-width (CSS-lengde) for en lavere maksbredde til ensartede kort — bildet tilpasser seg opp til denne grensen, og beskjæres via object-fit: cover når det er bredere. Verdien begrenses uansett til 50 %. artsdatabanken.no bruker 132px.

CDN

For bruk uten npm — Lit er inkludert i bundelen:

<link rel="stylesheet" href="https://cdn.example.com/@artsdatabanken/[email protected]/tokens.css" />
<script type="module" src="https://cdn.example.com/@artsdatabanken/[email protected]/cdn/adb-components.js"></script>

<adb-search>

Søkefelt med valgfri søk-knapp.

<!-- Med knapp (standard) -->
<adb-search placeholder="Søk i arter" button-variant="filled"></adb-search>

<!-- Uten knapp (frittstående) -->
<adb-search variant="standalone" placeholder="Søk"></adb-search>

| Egenskap | Type | Standard | Beskrivelse | |---|---|---|---| | size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | variant | 'with-button' \| 'standalone' | 'with-button' | Layout-variant | | button-variant | 'filled' \| 'outlined' | 'outlined' | Knappens visuelle stil | | placeholder | string | 'Søk i [type innhold]' | Plassholdertekst | | value | string | '' | Gjeldende verdi | | disabled | boolean | false | Deaktiverer feltet | | label | string | 'Søk' | aria-label for tilgjengelighet | | button-text | string | 'Søk' | Tekst i knappen |

Hendelser: adb-search, adb-input, adb-clear

CSS-variabel: --adb-search-width — overstyr bredden på inndatafeltet.

<adb-logo>

Artsdatabankens logo — logosymbol + navnetrekk. Støtter norsk (Bokmål/Nynorsk) og engelsk, tre størrelser, og lenke-atferd.

<!-- Standard (norsk, medium) -->
<adb-logo></adb-logo>

<!-- Som lenke -->
<adb-logo href="https://artsdatabanken.no"></adb-logo>

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

| Egenskap | Type | Standard | Beskrivelse | |------------|-------------------------|----------|-----------------------------------------------------------| | href | string | — | Gjør logoen til en lenke | | language | 'nb' \| 'nn' \| 'en' | 'nb' | Språkvariant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | tooltip | string | Auto | Tooltip-tekst (brukes kun når href er satt) |

CSS-deler: symbol, logotype, link

<adb-avatar>

Logo kun som symbol — brukes til profilbilder på sosiale medier og kompakte flater.

<adb-avatar background="rounded"></adb-avatar>
<adb-avatar background="circle" size="lg"></adb-avatar>

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

CSS-deler: symbol, background

Verktøy

markExternalLinks(container, options)

Automatisk merking av eksterne lenker. Brukes med lenkestilene fra @artsdatabanken/tokens/link.

import { markExternalLinks } from '@artsdatabanken/components/utils';

markExternalLinks(document, {
  whitelistedHosts: ['artsdatabanken.no', 'lister.artsdatabanken.no'],
});

| Parameter | Type | Standard | Beskrivelse | |---|---|---|---| | container | HTMLElement \| Document | document | Elementet som skannes | | options.whitelistedHosts | string[] | [] | Vertsnavn som regnes som interne | | options.srText | string | '(ekstern lenke)' | Skjermlesertekst | | options.srOnlyClass | string | 'adb-sr-only' | CSS-klasse for skjult tekst |

Framework-integrasjon

• Angular: Fungerer direkte — legg til CUSTOM_ELEMENTS_SCHEMA i modulen
• React 19+: Fungerer direkte — custom elements støttes nativt
• Drupal + Vite: Importer i JavaScript entry-filen; bruk :not(:defined) CSS for å unngå FOUC

Se dokumentasjonen for detaljerte integrasjonsguider.

Lisens

Apache 2.0