Gå til hovedinnhold
KOMPONENTER

Travel header

npmv4.2.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.

Props
Size

Komponenter

TravelHeader

NavnTypePåkrevd?Default-verdiBeskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any> 'div'

HTML-elementet eller React-komponenten som lager elementet

fromReactNode

Destinasjonen man reiser fra

toReactNode

Destinasjonen man reiser til

size"medium" | "large" large

Størrelsen på komponenten

noWrapboolean

Plassere til og fra på samme linje

classNamestring

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
Rediger denne siden på Bitbucket