Skip to main contentSkip to site searchSkip to component search
Honeycomb

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 to allow for greater content flexibility.

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 
<table class="flix-connection">
  <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>

Connection with date info

Fri 17 Oct 2016, 23:00 - 09:30+1
Time Location
Berlin Alexanderplatz
München Fröttmanning 
<table class="flix-connection">
  <caption 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>
  </caption>
  <thead class="flix-sr-only">
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Location</th>
    </tr>
  </thead>
  <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>

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.

As the amount of columns increase it is important to add meaningful column headers to help assistive technologies to identify each column, even if they are not visible. On the example bellow we added the .flix-sr-only helper to hide the <thead> section, that contains the headers for screen readers.

Fri 17 Oct 2016, 23:00 - 09:30+1
Time Location and bus details
Berlin Alexanderplatz
L123 to Munich
Berlin central bus station
Leipzig central bus station
Nuremberg central bus station (some additional information)
München Fröttmanning
Fri 17 Oct 2016, 23:00 - 09:30+1
Time Location and bus details
Berlin Alexanderplatz
L123 to Munich
Berlin central bus station
Leipzig central bus station
Nuremberg central bus station (some additional information)
München Fröttmanning 
<table class="flix-connection">
  <caption 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>
  </caption>
  <thead class="flix-sr-only">
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Location and bus details</th>
    </tr>
  </thead>
  <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">
            <span class="flix-btn__text">Hide 3 stops</span>
            <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>


<table class="flix-connection flix-connection--hide-stops">
  <caption 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>
  </caption>
  <thead class="flix-sr-only">
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Location and bus details</th>
    </tr>
  </thead>
  <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">
            <span class="flix-btn__text">Show 3 stops</span>
            <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>

Connection with live delay info

The correct implementation of the <time> element, with an appropriate datetime attribute creates a machine readable time format that can be used by many technologies (including screen readers) to perform various functionalities such as adding notifications, translating the date or time or adding events to calendar, to name a few.

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.

Always use semantically correct markup, as it is crucial to enable users everywhere.

Fri 17 Oct 2016, 23:00 - 09:30
Location and bus details Time
Berlin Alexanderplatz
Old time:
L123 to Munich
Berlin central bus station
Old time: Old time: New time: New time:
Leipzig central bus station
Old time: Old time: New time: New time:
Nuremberg central bus station (some additional information)
München Fröttmanning 
<table class="flix-connection flix-connection--live">
  <caption class="flix-connection__title">
    Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30</span>
  </caption>
  <thead class="flix-sr-only">
    <tr>
      <th scope="col">Location and bus details</th>
      <th scope="col" colSpan="2">Time</th>
    </tr>
  </thead>
  <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>
Made with 🍯 by FlixMobility 2022