NavigationTile

Egnet til:

• Å veilede brukeren til å navigere mellom flere tema.
• Å bygge opp sidemeny i ekstern toppbanner.
• Å fremheve en fortsettelse når brukeren har utført oppgaven sin.

Uegnet til:

• aksjonsknapp for å utføre en eller flere handlinger, da skal du bruke knapp.

Komponenter som ligner:

• Link
• LinkGroup

Teknisk dokumentasjon

Se NavigationTile i Storybook for tekniske detaljer. 

Varianter

NavigationTile kommer i tre ulike størrelser: Extra large, large og medium. Det er i tillegg mulig å variere bruken av pilikon, tema-ikon og beskrivelse 

Stor utgave med ikon og pil:

Medium navigasjonsflate uten ikon:

Navigasjonsflate uten beskrivelse:

Hvordan bruke komponenten  

• Tittel er påkrevd og settes i h2 som standard, men kan overstyres. 
• Ved bruk av flere navigasjonsflater skal disse kunne plasseres ved siden av hverandre i kolonner. En enkeltflate tar opp plassen til den containeren den er plassert i.
• Beskrivelse er valgfritt, og vil påvirke størrelsen på knappen.
• Tekstinnhold deles opp med kulepunkt i form av glyf mellom hvert temaord. 

Ekstra stor utgave brukes hovedsaklig på øvre nivåer som landingssider. Hvis flaten tillater det, plasseres det tre i bredden.

Ikoner

Bruk alltid ikon i den største utgaven (xLarge). Du kan sette et separat ikon for hver enkel navigasjonsflate. Ikonet plasseres sammen med tittel, og skal gi mening i kombinasjon med tittelen. NavigationTile kommer default med pilikon, men det er mulig å skjule det. 

Det er mulig å bytte ut pilikonet med ikonet for ekstern navigasjon, dersom lenken fører til en løsning utenfor Skatteetaten. 

Eksempel med eksternt ikon:

Universell utforming  

• Flere NavigationTiles må wrappes i et nav-element med et fornuftig navn (aria-label) Se eksempelkode i Storybook.
• Hvis du bruker overskrift i komponenten, sjekk at den har riktig nivå i konteksten.
• Kulepunkt (glyfs) mellom ord i tekstinnhold skal skjules ved å bruke aria-hidden="true".