Important information

This page is not available in English.

WordInfo

[Missing text '/SelectionFactory/DesignStatus/updated-breaking' for 'English']

Pakke: ds-overlays

WordInfo (ordforklaring) brukes til å gi forklaringer på ord og uttrykk direkte i løpende tekst. Den gjør det enklere for brukeren å forstå innholdet uten å måtte forlate konteksten.

Eksempler

Eksempel med åpen ordforklaring

Egnet til:

  • Forklare fremmedord eller faguttrykk som kan være ukjente for brukeren.
  • Gi ekstra kontekst til ord og uttrykk som ikke er essensielle for å løse en oppgave, men som kan bidra til bedre forståelse.

Uegnet til:

  • Å forklare overskrifter – bruk heller hjelpeikon og PopOver.
  • Å forklare ledetekster i skjemafelt – bruk gode navn, beskrivelse eller hjelpetekster.

Komponenter som ligner:

  • PopOver
  • Hjelpetekster i skjemafelt

Teknisk dokumentasjon

Se WordInfo i Storybook for tekniske detaljer. 

Hvordan bruke komponenten  

Vi anbefaler at ikonet vises som standard. Det signaliserer at ordet kan klikkes på, og skiller det fra vanlige lenker. Hvis det er mange ordforklaringer i samme avsnitt, og ikonene tar for mye oppmerksomhet, kan du vurdere å skru av visning av ikon. Pass også på at riktig HTML brukes i blokkelementer — for eksempel skal overskriftelementer (<h1>–<h6>) eller andre blokkelementer (<div>, <section>) ikke brukes inne i inline-elementer. 

Universell utforming  

  • WordInfo med ikon anbefales for å tydeliggjøre interaktivitet og skille den fra vanlige lenker i løpende tekst.
  • Knappen inneholder skjult tekst som beskriver formålet for skjermleserbrukere.
  • PopOver-komponenten har prop asSpan, som gjør at WordInfo kan brukes i blokkelementer som <p>.