Logo

Logo brukes for å vise Entur-merkevaren i produkter og applikasjoner. Den plasseres typisk i sidebar eller topbar og fungerer som inngang til produktets startside. Et klikk på logoen bør ta brukeren tilbake til startsiden.

Bruk productName for å vise produktets navn ved siden av Entur-logoen — f.eks. «Tavla», «Partner» eller «Nplan». Produktnavnet gir brukeren kontekst for hvilket produkt de befinner seg i.

Uten produktnavn vises kun Entur-logoen. Dette passer for situasjoner der konteksten allerede er tydelig, eller der logoen brukes frittstående.

Logo finnes i to størrelser:

• medium — standardstørrelse (SVG-høyde 2rem). Brukes i de fleste tilfeller.
• small — kompakt variant (SVG-høyde 1.5rem). Brukes der plassen er begrenset, f.eks. i en kollapset sidebar.

Sett href for å rendre logoen som et <a>-element. Vanlig praksis er at logoen lenker til produktets startside. I en sidebar eller topbar bør logoen alltid være klikkbar.

Entur-logoen er en SVG med role="img" og aria-label="Entur", slik at skjermlesere annonserer merkevaren. Når logoen brukes som lenke, får den synlig fokusindikator ved tastaturnavigasjon.

Logo er en del av @entur/menu-pakken. Komponenten rendrer Entur-logoen som SVG og støtter valgfritt produktnavn, to størrelser og lenkeoppførsel.

Produktnavnet vises ved siden av Entur-logoen. Uten productName vises kun logoen.

Når href er satt, rendres Logo automatisk som et <a>-element.

Logo støtter as-propen for å endre hvilket HTML-element eller React-komponent som rendres. Dette er nyttig for integrasjon med rammeverk som Next.js eller React Router, der du ønsker å bruke deres Link-komponent i stedet for et vanlig <a>-element.

Denne komponenten har ingen props