Journey-Header. Overview

Preview.

What does the component do?

The journey header is the title of a journey or connection. It shows the start and destination with an icon in between. The icon indicates the direction: one-way or round trip.

When should the component be used?

  • In a timetable context, for example as the title of a travel route.
 Usage

Rules.

  • The semantic level (level) matches the heading structure of the page. The display can be adjusted independently via visual-level.
  • The connection is described automatically for screen readers, for example "Connection from A to B".

Specification.

Open in Figma
Examples Default.
Try it out on Storybook Show HTML
Visual Level 4.
Try it out on Storybook Show HTML
Visual Level 6.
Try it out on Storybook Show HTML
Round Trip.
Try it out on Storybook Show HTML
Negative.
Try it out on Storybook Show HTML
Short Text.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

The <sbb-journey-header> element inherits from the <sbb-title> component,
which is used to display the title of the journey.

The component has two required properties, named origin and destination,
which represents the two ends of the journey.
An icon is placed between them: if the property roundTrip is set to false (default),
the icon is an arrow pointing to the destination, otherwise it is a double arrow to display the round-trip.

<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>
Style.

The component has a level property, which is passed to its inner <sbb-title> component;
it is rendered as a heading from h1 to h6. Default level is 3.
It also has a visualLevel property, which can be used in scenarios
where the visual representation needs to be different from the semantic meaning of the title level.
The default visualLevel is 5.

The component also has a negative background variant.

<sbb-journey-header origin="Point A" destination="Point B" visual-level="4"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" level="5"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" negative></sbb-journey-header>
Accessibility.

The component sets an aria-label on its host element which is read by screen readers to provide a description of the journey.

The following example will be read as (locale: EN): Connection from Point A to Point B..

<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>

The following one will be read as (locale: EN): Connection from Point A to Point B and back to Point A..

<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbJourneyHeaderElement, sbb-journey-header.

Properties.

Name Attribute Privacy Type Default Description
destination destination public string '' Destination location for the journey header.
level level public '1' | '2' | '3' | '4' | '5' | '6' '3' Title level
negative negative public boolean false Negative coloring variant flag.
origin origin public string '' Origin location for the journey header.
roundTrip round-trip public boolean false Whether the journey is a round trip. If so, the icon changes to a round-trip one.
visualLevel visual-level public '1' | '2' | '3' | '4' | '5' | '6' | null '5' Visual level for the title.