Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

ReadMore

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Tekst på knappen
    • Plassering i skjema
    • Innhold
  • Props
    • ReadMore
  • Tokens

Intro

Vi har ofte situasjoner hvor brukerne trenger en mer utdypende forklaring eller en begrunnelse. ReadMore gjør dette på en god måte. Den består av en knapp som du klikker på for å åpne et tekstpanel.

Egnet til:

  • Forklare vanskelige begreper eller ord
  • Begrunne spørsmål eller konsepter

Uegnet til:

  • Vise ekstra innhold (overflow) i artikler
  • Vise rikt innhold eller filer

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

Tekst på knappen

Teksten på knappen skal skrives slik at bruker forstår hva som vises i panelet som åpnes. Ofte refererer dette til teksten som ligger over knappen. F.eks.: Grunnen til at vi spør om dette.

Brukertester har avdekket at teksten på knappen ikke bør skrives som et spørsmål (Hvorfor spør vi om dette?). Det forvirret brukerne.

Det er enklere å forstå hva ReadMore skal forklare om teksten på knappen er kort, helst én linje.

Pass påReadMore med lang setning over 2 linjer
Pass på lange setninger. De er vanskeligere å forstå.
Pass påReadMore formulert som et spørsmål
Pass på spørsmålsform. Det kan skape forvirring i kombinasjon med annet innhold.

Plassering i skjema

Bruker du ReadMore for å forklare noe knyttet til et skjemaelement plasserer du det under skjemaelementet. Detaljert forklaring kan du lese i artikkelen Rekkefølge på elementene i et spørsmål.

Innhold

Innholdet i panelet skal forklare eller gi detaljer til teksten som ligger over. Innholdet bør være så enkelt som mulig og ikke for langt. Vi anbefaler ett avsnitt med vanlig tekst eller en liste. Hvis det er mye innhold kan knappen som lukker panelet forsvinner ut av skjermbildet.

GjørReadMore med riktig innhold
ReadMore skal inneholde lite og ren tekst (f.eks. lister og linker).
UnngåReadMore med feil innhold
ReadMore skal ikke inneholde flere avsnitt og rikt innhold.

Props

ReadMore

children

  • Type:
    ReactNode
  • Description:

header

  • Type:
    ReactNode
  • Description:

open?

  • Type:
    boolean
  • Description:

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

size?

  • Type:
    "large" | "medium" | "small"
  • Default:
    medium
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Tokens

TokenFallback
--ac-read-more-text--a-text-action
--ac-read-more-hover-bg--a-surface-hover
--ac-read-more-hover-text--a-text-action-hover
--ac-read-more-active-bg--a-surface-active
--ac-read-more-line--a-border-divider
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack