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