KOMPONENTER

Travel header

npmv6.0.12

Travel header viser destinasjonene som man reiser fra og til på en visuell måte. Vi benytter den røde streken fra logoen for å understreke identiteten til Entur.

TravelHeader-props

Size

medium

large

Fra

Til

Komponenter

TravelHeader

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`'div'`	HTML-elementet eller React-komponenten som lager elementet
`from`	`ReactNode`		Destinasjonen man reiser fra
`to`	`ReactNode`		Destinasjonen man reiser til
`size?`	`"medium" \| "large"`	`'large'`	Størrelsen på komponenten
`noWrap?`	`boolean`		Plassere til og fra på samme linje
`className?`	`string`		Ekstra klassenavn

Retningslinjer for bruk

Destinasjonene skal alltid stå på hver sin linje, og ‘til’-destinasjon står alltid med et innrykk etter streken på linje to. Hvis det er så lange stedsnavn at de ikke får plass, benyttes ‘…’ isteden for å brekke til ny rad. ‘Fra’ iog ‘Til’ er alltid stoppesteder, men på billetter kan også soner benyttes.

Eksempel

Her er et eksempel på hvordan man har tatt i bruk travel header i reiseplanleggeren til Entur.

Skjermbilde av Entur-appen hvor Travel-Header illustrerer avreisested og destinasjon