Hopp til innhold

Dette er dokumentasjonen for Aksel versjon 7. Den nyeste versjonen finner du på aksel.nav.no

Komponenter

GuidePanel

GuidePanel gir en vennlig velkomst og introduksjon av en løsning eller side.

StabilOppdatert 9. mai 2025

Egnet til:

  • Forklare brukeren hva hen gjør på siden.
  • Veilede brukeren.

Uegnet til:

  • Vise viktige meldinger eller varsler.

Eksempler

Retningslinjer

  • GuidePanel er laget for å ligge øverst på siden.
  • Ikke bruk flere guidepanels på samme side.

Innhold

Teksten bør holdes kort, tydelig og informativ. Bruk kun tekstlig innhold. GuidePanel er ikke designet for å vise viktige meldinger, da må du bruke Alert.

Avatar

Avataren skal inneholde en Illustrasjon av en person. For å endre må du bruke Aksels illustrasjonsbibliotek i Figma.

Props

GuidePanel

children

  • Type:
    ReactNode
  • Description:

    GuidePanel content

illustration?

  • Type:
    ReactNode
  • Description:

    Custom svg/img element

poster?

  • Type:
    boolean
  • Default:
    true on mobile (<480px)
  • Description:

    Render illustation above content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I versjon 8 er komponent-tokens fjernet.

TokenFallback
--ac-guide-panel-bg--a-surface-default
--ac-guide-panel-border--a-border-alt-3
--ac-guide-panel-illustration-bg--a-surface-alt-3-subtle