Aksel

Meny

Komponenter / Core

GuidePanel

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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

Egnet til:

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

Uegnet til:

  • Vise viktige meldinger eller varsler.

Har du innspill til komponenten?

Send forslag

Eksempler

På mobil (brekkpunkt sm) blir komponenten mer kompakt og avataren flyttes til toppen. Avatar-plasseringen kan låses med propen 'poster'.

SandboxSandbox
Åpne eksempel i nytt vindu

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:

illustration?

  • Type:
    ReactNode
  • Description:

poster?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

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

Relaterte komponenter