Kort (Card)

<adb-card> er en generisk, gjenbrukbar kort-komponent. I stedet for egne komponenter per korttype (“Editorial Card”, “Handbook Card”, “Species Card”, “Nature Card”, “Contact Card” i Figma), bygges alle typene ved å fylle <adb-card> sine slots med innhold — akkurat som det delte .adb-card-mønsteret i Drupal-temaet i dag.

Hele kortet er klikkbart når href er satt: tittelen blir en lenke, og et usynlig overlegg strekker seg over hele kortet (et “stretched link”-mønster). Dette gir én tastaturfokuserbar lenke som dekker hele klikkflaten, uten behov for JavaScript. Teksten i kortet forblir markerbar fordi den ligger over overlegget.

Eksempel

Brødtekst, oretrekk med eget innhold. Dyrekjenner er arter som ikke bare lever standardliv i Norge i dag, men som kan finne på det på sikt.

Korttyper (bruksmønstre)

Editorial Card

Brukes for å liste artikler, relaterte artikler, temasider og ikke-taksonomiske artsgrupper. Finnes i tre størrelser (lg, md, sm).

<adb-card overline="Rovdyr" heading="Card Title" subtitle="Subtitle bottom text" href="/artikkel">
  <img slot="media" src="/bilder/gaupe.webp" alt="Gaupe (Lynx lynx) i snø" />
  <p slot="footer">Brødtekst med eget innhold …</p>
</adb-card>

Handbook Card

Brukes kun for artshåndbøker. Har en supertittel med ikon knyttet til konseptet “Artshåndbok”.

<adb-card heading="Humler" href="/artshandbok/humler">
  <span slot="overline-icon" aria-hidden="true">📖</span>
  <span slot="overline">Artshåndbok</span>
  <img slot="media" src="/bilder/humle.jpg" alt="" />
  <p slot="footer"><em>Frode Ødegaard, Jon Ove Gjershaug</em></p>
</adb-card>

Species Card

Viser en art med valgfri statusbadge (rødliste-/fremmedart-vurdering) og metadata i footer-slotten. Kortet kan vise et lite hjørne-merke via media-badge.

<adb-card overline="Art" heading="Åsørkanie" subtitle="Vitenskapelig navn" href="/arter/122117">
  <img slot="media" src="/bilder/art.jpg" alt="" />
  <span slot="media-badge">…</span>
  <div slot="footer">
    <!-- Statusbadge kommer fra risikokategorier-komponenten (under utvikling) -->
    <p><strong>Rapportør:</strong> Kari Nordmann</p>
  </div>
</adb-card>

Nature Card

Enkel NiN-naturtype-teaser med overline="Type" og kode som undertittel.

<adb-card overline="Type" heading="Naturtype" subtitle="Kode" href="/naturtyper/t1">
  <img slot="media" src="/bilder/naturtype.jpg" alt="" />
</adb-card>

Contact Card

Horisontal orientering — brukes til å presentere ansatte. Kontaktkortet skal kun lenke til ansattsiden. media-max-width setter en maksbredde på bildet så en liste med ansatte får ensartede kort.

<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>

Størrelser

size styrer skalering av padding, skriftstørrelse og medieutsnitt, og kan kombineres fritt med orientation.

Orientering

orientation="horizontal" plasserer mediet til venstre og teksten til høyre, med chevronen vertikalt sentrert lengst til høyre — samme mønster som brukes for kontakt- og ansattkort i dag.

I horisontal orientering bestemmer bildets egen størrelse bredden på mediecontaineren som standard, men mediet tar aldri mer enn 50 % av kortbredden. Vil du ha ensartede kort (f.eks. en liste med ansatte), setter du en lavere maksbredde med media-max-width — bildet tilpasser seg opp til denne grensen og beskjæres via object-fit: cover når det er bredere. Verdien begrenses uansett til 50 %. På artsdatabanken.no brukes 132px:

<adb-card orientation="horizontal" media-max-width="132px" heading="Ane Myhre" subtitle="Seniorrådgiver" href="#">
  <img slot="media" src="/bilder/ane.jpg" alt="" />
</adb-card>

Uten media-max-width styrer bildet bredden selv (fortsatt maks 50 %):

Container-responsiv orientering (`auto`)

orientation="auto" gjør kortet container-responsivt: det rendres vertikalt så lenge kortet er smalere enn auto-breakpoint, og horisontalt fra og med den bredden. Da kan samme kortmarkup brukes både i hovedspalten og i en smal sidekolonne uten å hardkode en orientering per bruksområde.

Målingen gjøres på kortets egen bredde (via ResizeObserver), ikke på vindusbredden — et kort i en smal kolonne forblir vertikalt selv på en bred skjerm.

<!-- Bytter til horisontal når kortet er 480 px eller bredere -->
<adb-card orientation="auto" heading="Gaupe" subtitle="Lynx lynx" href="#">
  <img slot="media" src="/bilder/gaupe.jpg" alt="" />
</adb-card>

<!-- Egen terskel -->
<adb-card orientation="auto" auto-breakpoint="360" heading="Gaupe" href="#">…</adb-card>

Samme markup i to ulike bredder:

Komponenten setter selv attributtet resolved-orientation (vertical eller horizontal) på verten, slik at du kan style mot orienteringen som faktisk gjelder:

adb-card[resolved-orientation="horizontal"] { /* … */ }

Attributtet er skrivebeskyttet — sett orientation for å styre kortet. Uten ResizeObserver (f.eks. ved SSR) faller auto tilbake til vertikal.

Ikoner og illustrasjoner i mediet

Mediecontaineren er optimalisert for foto som standard: innholdet strekkes til å fylle boksen og beskjæres (media-fit="cover"), og boksen har en tonet bakgrunnsplate. For ikoner og illustrasjoner justerer du dette med media-fit og media-background i stedet for lokal CSS:

Verdi	Bruk
`media-fit="cover"` (standard)	Foto som skal fylle og beskjæres
`media-fit="contain"`	Illustrasjoner som må vises i sin helhet, uten beskjæring
`media-fit="none"`	Ikoner som skal beholde sin naturlige størrelse og sentreres
`media-background="none"`	Fjerner den tonede bakgrunnsplaten bak transparente grafikker

Med media-fit="none" settes det heller ikke lenger et fast bildeformat (4:3 / 16:9) på mediecontaineren — boksen krymper til innholdet og får litt luft rundt, som kan justeres med CSS-variabelen --adb-card-media-padding.

<adb-card media-fit="none" media-background="none" overline="Artsprosjektet"
          heading="Om prosjektet" subtitle="Slik jobber vi" href="#">
  <svg slot="media" width="48" height="48" aria-hidden="true"><!-- … --></svg>
</adb-card>

Bokstavsetting på overline

Overline er som standard capitalize i tråd med Figma-spesifikasjonen. Det gjør at setningscase-tekster som «Species project» blir til «Species Project». Sett overline-case="none" for å beholde teksten slik den er skrevet:

<adb-card overline-case="none" overline="Species project" heading="Kortittel" href="#"></adb-card>

Gyldige verdier: capitalize (standard), none, uppercase, lowercase.

Rutenett med flere kort

Bruk et vanlig CSS Grid/Flexbox-omslag rundt flere <adb-card>-elementer:

<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;">
  <adb-card heading="Fugler og pattedyr" subtitle="Artsgruppe" href="#">…</adb-card>
  <adb-card heading="Insekter" subtitle="Artsgruppe" href="#">…</adb-card>
  <adb-card heading="I havet" subtitle="Artsgruppe" href="#">…</adb-card>
</div>

API

Attributt	Type	Standard	Beskrivelse
`overline`	`string`	—	Liten etikett over tittelen (f.eks. taksonrang, NiN-kategori)
`heading`	`string`	—	Korttittelen. Bruk `heading`-slotten for rikt innhold
`heading-level`	`number` (2–6)	`3`	Overskriftsnivå som rendres (`<h2>`–`<h6>`) — tilpass til dokumentets overskriftshierarki
`subtitle`	`string`	—	Sekundærtekst under tittelen
`href`	`string`	—	URL kortet lenker til. Når satt blir hele kortet klikkbart
`orientation`	`vertical \| horizontal \| auto`	`vertical`	Plassering av media relativt til tekstinnholdet. `auto` bytter mellom vertikal og horisontal etter kortets egen bredde
`auto-breakpoint`	`number` (px)	`480`	Kortbredden der `orientation="auto"` bytter til horisontal
`media-fit`	`cover \| contain \| none`	`cover`	Hvordan innholdet i `media`-sloten fyller mediecontaineren
`media-background`	`subtle \| none`	`subtle`	`none` fjerner den tonede bakgrunnsplaten bak mediet
`overline-case`	`capitalize \| none \| uppercase \| lowercase`	`capitalize`	Bokstavsetting på overline
`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, skriftstørrelse og medieutsnitt
`resolved-orientation`	`vertical \| horizontal`	—	Skrivebeskyttet. Settes av komponenten og viser orienteringen som faktisk gjelder etter at `auto` er løst opp

Slots

Slot	Beskrivelse
`overline-icon`	Valgfritt lite ikon foran overline-teksten
`overline`	Rikt innhold som alternativ til `overline`-attributtet
`heading`	Rikt innhold som alternativ til `heading`-attributtet
`subtitle`	Rikt innhold som alternativ til `subtitle`-attributtet
`media`	Kortets bilde, ikon eller illustrasjon-plassholder
`media-badge`	Valgfritt lite merke/indikator over mediet (f.eks. et hjørne-ikon)
`footer`	Innhold under undertittelen — brødtekst, tags, vurderingsbadges, metadata osv.

CSS Parts

/* Tilpass selve kort-rammen */
adb-card::part(card) {
  border-radius: 0;
}

/* Tilpass media-omslaget */
adb-card::part(media) {
  aspect-ratio: 1 / 1;
}

CSS-variabler

Variabel	Standard	Beskrivelse
`--adb-card-media-padding`	`0` (`--adb-spacing-md` når `media-fit="none"`)	Innvendig luft i mediecontaineren

adb-card[media-fit="none"] {
  --adb-card-media-padding: 24px;
}

Universell utforming (WCAG 2.1 AA)

Ett fokuserbart element per kort

Når href er satt rendres kun én <a> per kort. Klikk hvor som helst på kortet (inkludert bildet) trigger denne ene lenken via et CSS-basert “stretched link”-overlegg — dette tilfredsstiller 2.4.4 Lenkeformål (lenkens tilgjengelige navn er hele tittelteksten) og unngår duplikate eller forvirrende lenker for skjermlesere og tastaturbrukere.

Fokusindikator på kortet

Fokusringen tegnes rundt hele kortet (ikke den innebygde lenken), slik at markeringen rammer inn hele klikkflaten. I nettlesere som støtter :has() er dette den eneste fokusringen — lenkens egen ring undertrykkes for å unngå dobbel markering. I eldre nettlesere uten :has()-støtte faller vi tilbake til en ring på selve lenken, slik at 2.4.7 Fokus synlig aldri går tapt.

Tekst kan markeres

Selv om hele kortet er klikkbart, ligger den lesbare teksten (overline, tittel, undertittel og footer-innhold) over det usynlige lenkeoverlegget. Det betyr at brukere fortsatt kan markere og kopiere tekst i kortet — bare de «tomme» områdene (padding og media) aktiverer lenken ved klikk. Tittelen navigerer fremdeles ved klikk siden den er en ekte <a>.

Overskriftsnivå

Tittelen rendres som en overskrift (<h2>–<h6>, standard <h3>). Bruk heading-level-attributtet til å matche kortets plassering i dokumentets overskriftshierarki (1.3.1 Informasjon og relasjoner, 2.4.6 Overskrifter og etiketter).

Bilder krever alt-tekst

<adb-card> styrer ikke selve <img>-elementet som slottes inn i media. Du må selv sette alt:

Beskrivende alt hvis bildet formidler informasjon som ikke allerede finnes i tittel/undertittel.
Tomt alt="" hvis bildet er rent dekorativt/illustrerende (f.eks. når tittelen allerede beskriver arten).

Interaktive elementer i footer-slotten (f.eks. en e-postlenke på et kontaktkort) forblir uavhengig klikkbare og fokuserbare — de ligger over det usynlige kort-overlegget i stacking-rekkefølgen, slik at nettleseren sender klikket til riktig element.

Fargebruk

Vurderingsbadges (rødliste/fremmedart) i footer-slotten må alltid kombinere farge med tekst eller ikon — 1.4.1 Bruk av farge tillater ikke at status kun formidles gjennom fargen på en prikk eller sirkel.

WCAG-kriterier

Kriterium	Nivå	Oppfylt	Merknad
1.1.1 Ikke-tekstlig innhold	A	⚠️ Forbrukeransvar	Kortet krever at slottet `<img>` har korrekt `alt`
1.3.1 Informasjon og relasjoner	A	✅	Semantisk `<h2>`–`<h6>` for tittel, konfigurerbart nivå
1.4.1 Bruk av farge	A	⚠️ Forbrukeransvar	Statusbadges i footer-slotten må ikke basere seg på farge alene
1.4.3 Kontrast (minimum)	AA	✅	Tekst-tokens gir ≥ 5.4:1 (sekundærtekst) og ≥ 13:1 (primærtekst) mot bakgrunn
1.4.11 Kontrast for ikke-tekstlig innhold	AA	✅	Chevron-ikonet har 3.7:1 kontrast mot hvit bakgrunn
2.1.1 Tastatur	A	✅	Hele kortet nås og aktiveres via én native `<a>`
2.4.4 Lenkeformål	A	✅	Lenkens tilgjengelige navn er hele tittelteksten
2.4.7 Fokus synlig	AA	✅	Fokusring rundt hele kortet (fallback på lenken der `:has()` mangler)
4.1.2 Navn, rolle, verdi	A	✅	Native `<a>`/`<h3>` gir korrekt rolle uten behov for ARIA

FOUC-håndtering (Drupal / SSR)

adb-card:not(:defined) {
  display: block;
  visibility: hidden;
  min-height: 20rem; /* reserverer plass */
}