" target="_blank" rel="noreferrer noopener" class="ml-9 navds-button navds-button--secondary-neutral navds-button--medium">
På mobil (brekkpunkt sm) blir komponenten mer kompakt og avataren flyttes til toppen. Avatar-plasseringen kan låses med propen 'poster'.
import { GuidePanel } from "@navikt/ds-react";
const Example = () => {
return (
<GuidePanel>
Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer
enn X måneder siden du søkte, skal du få brev om at saksbehandlingstiden
er forlenget.
</GuidePanel>
);
};
I poster-varianten er avataren plassert øverst i midten.
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.
Avataren skal inneholde en Illustrasjon av en person. For å endre må du bruke Aksels illustrasjonsbibliotek i Figma.
ReactNode
GuidePanel content
ReactNode
Custom svg/img element
boolean
Render illustation above content
string
LegacyRef<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).
React Docs
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 |