Egnet til:

• å vise innhold og handlinger om et emne som du trenger å fremheve på en side.

Uegnet til:

• å gi en statusbeskjed. Bruk i stedet bruke Alert.
• å være hovedinnhold på en side. I stedet skal det være innhold som kan stå alene og fortsatt være del av siden/løsningen.

Teknisk dokumentasjon

Se Panel i Storybook for tekniske detaljer. 

Varianter

Vi har to varianter, hvor den ene har ramme og den andre har farget bakgrunn. 

Panel med bakgrunnsfarge

Eksempel på panel med bakgrunnsfarge, ikon og knapp. 

Ramme

Eksempel på panel med farget ramme.

Hvordan bruke komponenten

Farger

Fargene i Panel reflekterer samme betydning som fargene i Alert.

• Gul – nøytral informasjon.
• Blå – nøytral informasjon.
• Grønn – suksess eller nøytral informasjon.
• Rød – advarsel

Illustrasjoner og ikon

Både panel med ramme og fyll kan inneholde tittel og ikon eller illustrasjon. Vi kan bruke illustrasjoner når de gjør et budskap lettere å forstå, eller bygger opp under et budskap eller oppgaven bruker skal gjøre. 

Panel med illustrasjon og knapp til hovedhandling.

Universell utforming  

• Tekstavsnitt inni paneler skal ligge i <p>-elementer, fortrinnsvis ved å bruke Paragraph-komponenten.
• Hvis et ikon gir en merverdi som ikke kommer frem i panelets tekst, skal det ha en alternativ tekst.
• Illustrasjoner er kodet som «pynt» og trenger derfor ikke tekstlig beskrivelse.