Intro
GuidePanel gir en vennlig velkomst og introduksjon av innhold eller løsning til bruker. Komponenten kan brukes til å guide bruker gjennom siden.
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
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 |
