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.

<Logo productName="Linje" href="/" />

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.

<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
  <Logo productName="Tavla" />
  <Logo productName="Partner" />
  <Logo />
</div>

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.

<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
  <Logo productName="Tavla" size="medium" />
  <Logo productName="Tavla" size="small" />
</div>

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.

<Logo productName="Partner" href="/" />

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.