Connection
A component (with variations) to visualize a connection: Including time, date, line number, delay information, and the locations.
The connection element is presented as a table, in order to avoid confusion for screen reader users, you must add role="presentation" to the table element and avoid using any table headers, captions and labels inside of it.
By default all content will shrink to fit by occupying vertical spacing, this ensures that all station information are always displayed.
To make any of the *__station* classes overflow on one line you can simply wrap the direct child content in a <div class="flix-connection__ellipsis".
Simple connection
|
Berlin Alexanderplatz
|
|
München Fröttmanning
|
<div class="flix-connection">
<table role="presentation">
<tbody><tr>
<td>
<div class="flix-connection__station">
Berlin Alexanderplatz
</div>
</td>
</tr>
<tr>
<td>
<div class="flix-connection__station">
München Fröttmanning
</div>
</td>
</tr>
</tbody></table>
</div>Connection with date info
To add a connection title choose any heading element that is adequate for the heading hierarchy and add the flix-connection__title class name.
Fri 17 Oct 2016, 23:00 - 09:30+1
|
Berlin Alexanderplatz
|
|
|
München Fröttmanning
|
<div class="flix-connection">
<h3 class="flix-connection__title">
Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
</h3>
<table role="presentation">
<tbody><tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T07:00">
07:00
</time>
</td>
<td>
<div class="flix-connection__station">
Berlin Alexanderplatz
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T15:30">
15:30
</time>
</td>
<td>
<div class="flix-connection__station">
München Fröttmanning
</div>
</td>
</tr>
</tbody></table>
</div>Connection with stops
The element can be used for an indefinite amount of rows, which have a dedicated modifier. To toggle visibility of all middle stations, you can simply apply --hide-stops modifier on the wrapping element.
Fri 17 Oct 2016, 23:00 - 09:30+1
|
Berlin Alexanderplatz
L123 to Munich
|
|
|
Berlin central bus station
|
|
|
Leipzig central bus station
|
|
|
Nuremberg central bus station (some additional information)
|
|
|
München Fröttmanning
|
<div class="flix-connection">
<h3 class="flix-connection__title">
Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
</h3>
<table role="presentation">
<tbody><tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-16T23:00">
23:00
</time>
</td>
<td>
<div class="flix-connection__station">
Berlin Alexanderplatz
</div>
<div class="flix-connection__station-info">
L123 to Munich
</div>
<div class="flix-connection__station-toggler">
<button class="flix-btn flix-btn--link">
Hide 3 stops
<i class="flix-btn__icon flix-icon flix-icon-arrow-up" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-16T23:30">
23:30
</time>
</td>
<td>
<div class="flix-connection__station">
Berlin central bus station
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T04:30">
04:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
Leipzig central bus station
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T06:30">
06:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
Nuremberg central bus station (some additional information)
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T09:30">
09:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
München Fröttmanning
</div>
</td>
</tr>
</tbody></table>
</div><div class="flix-connection flix-connection--hide-stops">
<h3 class="flix-connection__title">
Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
</h3>
<table role="presentation">
<tbody><tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-16T23:00">
23:00
</time>
</td>
<td>
<div class="flix-connection__station">
Berlin Alexanderplatz
</div>
<div class="flix-connection__station-info">
L123 to Munich
</div>
<div class="flix-connection__station-toggler">
<button class="flix-btn flix-btn--link">
Show 3 stops
<i class="flix-btn__icon flix-icon flix-icon-arrow-down" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-16T23:30">
23:30
</time>
</td>
<td>
<div class="flix-connection__station">
Berlin central bus station
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T04:30">
04:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
Leipzig central bus station
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T06:30">
06:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
Nuremberg central bus station (some additional information)
</div>
</td>
</tr>
<tr>
<td>
<time class="flix-connection__time" dateTime="2016-10-17T09:30">
09:30<span class="flix-connection__day">+1</span>
</time>
</td>
<td>
<div class="flix-connection__station">
München Fröttmanning
</div>
</td>
</tr>
</tbody></table>
</div>Connection with live delay info
The correct implementation of the <time> element with an adequate datetime attribute creates a machine readable time format that can be used by screen readers to announce the given date in a format the user chooses. It also enables many functionalities such as adding notifications, translating the date or time or adding events to calendar.
Also notice the usage of the del and ins elements around old and new times. These elements are responsible for indicating a removed and added information, some users may configure their devices to show only the most recently inserted value. This documentation about the del element from Mozilla offers more information. In addition to that, labeling the old time and new time with a .flix-sr-only text will help give textual context to visually impaired users by explaining what those many different times actually mean.
Fri 17 Oct 2016, 23:00 - 09:30
|
Berlin Alexanderplatz
|
|
|
|
L123 to Munich
|
||
|
Berlin central bus station
|
|
New time: New time: |
|
Leipzig central bus station
|
|
New time: New time: |
|
Nuremberg central bus station (some additional information)
|
||
|
München Fröttmanning
|
||
<div class="flix-connection flix-connection--live">
<h3 class="flix-connection__title">
Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30</span>
</h3>
<table role="presentation">
<tbody><tr>
<td>
<div class="flix-connection__station">
Berlin Alexanderplatz
</div>
</td>
<td>
<del>
<span class="flix-sr-only">Old time:</span>
<time class="flix-connection__time flix-connection__time--old" dateTime="2016-10-16T07:00">
07:00
</time>
</del>
</td>
<td>
<time class="flix-connection__time flix-connection__time--danger" dateTime="2016-10-16T23:00">
23:00
</time>
</td>
</tr>
<tr>
<td colSpan="3">
<div class="flix-connection__station-info">
L123 to Munich
</div>
</td>
</tr>
<tr>
<td>
<div class="flix-connection__station">
Berlin central bus station
</div>
</td>
<td>
<del>
<span class="flix-sr-only">Old time:</span>
<time class="flix-connection__time flix-connection__time--old" dateTime="2016-10-16T23:30">
23:30
</time>
</del>
<del>
<span class="flix-sr-only">Old time:</span>
<time class="flix-connection__time flix-connection__time--old" dateTime="2016-10-16T23:35">
23:35
</time>
</del>
</td>
<td>
<ins>
<span class="flix-sr-only">New time:</span>
<time class="flix-connection__time flix-connection__time--warning" dateTime="2016-10-17T00:35">
00:35<span class="flix-connection__day">+1</span>
</time>
</ins>
<ins>
<span class="flix-sr-only">New time:</span>
<time class="flix-connection__time flix-connection__time--warning" dateTime="2016-10-17T00:40">
00:40<span class="flix-connection__day">+1</span>
</time>
</ins>
</td>
</tr>
<tr>
<td>
<div class="flix-connection__station">
Leipzig central bus station
</div>
</td>
<td>
<del>
<span class="flix-sr-only">Old time:</span>
<time class="flix-connection__time flix-connection__time--old" dateTime="2016-10-17T04:30">
04:30<span class="flix-connection__day">+1</span>
</time>
</del>
<del>
<span class="flix-sr-only">Old time:</span>
<time class="flix-connection__time flix-connection__time--old" dateTime="2016-10-17T04:35">
04:35<span class="flix-connection__day">+1</span>
</time>
</del>
</td>
<td>
<ins>
<span class="flix-sr-only">New time:</span>
<time class="flix-connection__time flix-connection__time--warning" dateTime="2016-10-17T04:35">
04:35<span class="flix-connection__day">+1</span>
</time>
</ins>
<ins>
<span class="flix-sr-only">New time:</span>
<time class="flix-connection__time flix-connection__time--warning" dateTime="2016-10-17T04:40">
04:40<span class="flix-connection__day">+1</span>
</time>
</ins>
</td>
</tr>
<tr>
<td>
<div class="flix-connection__station">
<div class="flix-connection__ellipsis">
Nuremberg central bus station (some additional information)
</div>
</div>
</td>
<td colSpan="2">
<time class="flix-connection__time" dateTime="2016-10-17T06:30">
06:30<span class="flix-connection__day">+1</span>
</time>
<time class="flix-connection__time" dateTime="2016-10-17T06:30">
06:30<span class="flix-connection__day">+1</span>
</time>
</td>
</tr>
<tr>
<td>
<div class="flix-connection__station">
München Fröttmanning
</div>
</td>
<td colSpan="2">
<time class="flix-connection__time" dateTime="2016-10-17T09:30">
09:30<span class="flix-connection__day">+1</span>
</time>
</td>
</tr>
</tbody></table>
</div>