Intro
GuidePanel gir en vennlig velkomst og introduksjon av innhold eller løsning til bruker. Komponenten kan brukes til å guide bruker gjennom siden.
Egnet til:
- Forsikre bruker om hva de gjør på siden
Uegnet til:
- Vise viktige meldinger eller varsler
Eksempler
Varianter
Størrelser
Komponenten blir tilpasset mobil på brekkpunkt sm (<480px). Da blir avataren og paddingen mindre. Avataren flyttes også øverst (poster-variant), hvis ikke du overstyrer det.
Poster-variant
Avataren er plassert på venstre side som standard. I poster-varianten er avataren plassert øverst i midten.
Avataren
Avataren kan inneholde en Illustrasjon av en person eller et ikon. Fra Aksel kommer den med et eksempel på illustrasjon. Denne kan endres av teamet etter egne ønsker. For å endre må du bruke Aksels illustrasjonsbibliotek i Figma.
Retningslinjer
GuidePanel kan være en fin og effektiv måte å kommunisere informasjon eller instrukser på. Ved bruk av illustrasjon av en person vil grensesnittet oppleves mer vennlig.
Bruk Alert for viktige meldinger.
Bruk
- Komponenten er automatisk tilpasset desktop og mobil. Husk å teste innholdet deres på ulike skjermstørrelser.
- 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.
Props
GuidePanel
- children ReactNode
- GuidePanel content
- illustration? ReactNode
- Custom svg/img element
- poster?boolean
- Render illustation above content
- className? string
- ref? Ref<HTMLDivElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- GuidePanel extends HTMLDivElement
Tokens
| Token | Fallback |
|---|---|
| --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 |
