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.

Component consists of the list of flix-connection__item elements. Every item element has content slots for station name, time and general content slot to fit any additional information or components.

By default flix-connection__item represents a stop and has a stop marker to the left, for some cases you might need to remove that to display some general information. If it's the case then simply apply flix-connection__item--slot modifier to it.

By combining these elements you can achieve different kind of variations and complexity in the resulting component.

Simple connection

  • Berlin Alexanderplatz
  • München Fröttmanning
<div class="flix-connection">
  <ul class="flix-connection__list">
    <li class="flix-connection__item">
      <div class="flix-connection__station">Berlin Alexanderplatz</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T07:00">
          07:00
        </time>
      </div>
    </li>
    <li class="flix-connection__item">
      <div class="flix-connection__station">München Fröttmanning</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T15:30">
          15:30
        </time>
      </div>
    </li>
  </ul>
</div>

This is the simplest variation with just 2 stops and a time.

Let's add more stations to the list, include a title, and add additional "slot" item element, like so:

Fri 17 Oct 2016 +1 day

  • Berlin Alexanderplatz
  • Leipzig central bus station
  • Timezone: PST (+1:00)
  • München Fröttmanning
  • 80939 Munich-Schwabing-Freimann 
<div class="flix-connection">
  <h3 class="flix-connection__title">
    Fri 17 Oct 2016 <span class="flix-connection__day">+1 day</span>
  </h3>
  <ul class="flix-connection__list">
    <li class="flix-connection__item flix-connection__item--last">
      <div class="flix-connection__station">Berlin Alexanderplatz</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T07:00">
          07:00
        </time>
      </div>
    </li>
    <li class="flix-connection__item">
      <div class="flix-connection__station">Leipzig central bus station</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T10:00">
          10:00
        </time>
      </div>
    </li>
    <li class="flix-connection__item flix-connection__item--slot">
      <div class="flix-connection__content">
        <div class="flix-box flix-box--small">
          <i aria-hidden="true" class="flix-icon flix-icon-time flix-icon--primary"></i>Timezone: PST (+1:00)
        </div>
      </div>
    </li>
    <li class="flix-connection__item flix-connection__item--last">
      <div class="flix-connection__station">München Fröttmanning</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T15:30">
          15:30
        </time>
      </div>
    </li>
    <li class="flix-connection__item flix-connection__item--slot">
      <div class="flix-connection__content">
        <div class="flix-box flix-box--small">
          <i aria-hidden="true" class="flix-icon flix-icon-pin flix-icon--primary"></i>80939 Munich-Schwabing-Freimann
        </div>
      </div>
    </li>
  </ul>
</div>

Pay attention to time elements, these are required to represent time and work well with the screen readers. 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.

We have also put a flix-box component into general content element inside the connection items slots to illustrate how it can be expanded with the additional info.

In order for connection line to look as expected you need to have stations as first and last element in the list. If for some reason you need the slots to be displayed as first or last elements in the list make sure to use flix-connection__item--first and flix-connection__item--last modifiers to mark the first/last stations. This will limit the connection line to only be displayed between these stations. If these are omitted connection line will extend to also include these slots.

Live connection with a bus marker and state coloring

It's possible to mark one of the connection items as current by adding a flix-connection__item--current modifier to it. This will show a marker container in there. In order to display an icon you'll need to add an icon component as a direct child of flix-connection__item. Something like this:

<li class="flix-connection__item flix-connection__item--current">
  <flix-icon class="flix-connection__icon" aria-hidden="true" name="bus" solid="" size="cover"></flix-icon>
  
</li>

Please note 2 things:

  • you'll need honeycomb-icon-components library to be initialized on your page (see here for more details)
  • icon size needs to be set to cover.

It's possible to customize the icon if you need to, just change the name to the one you want to appear in here.

You can have the icons in every item if you need to dynamically toggle them, but only the one that is located inside the --current item stays visible.

Another thing you can do is toggle different color variations for the marker and the route line, by picking up one of the following modifiers:

  • flix-connection--success
  • flix-connection--warning
  • flix-connection--danger

This is handy for illustrating the delay status information for the giver route.

Fri 17 Oct 2016 +1 day

  • Berlin Alexanderplatz

    Old time:
  • Bus

    Direction Munich central bus station

    Free Wi-Fi Sockets 1 Hold luggage
  • Leipzig central bus station
    Old time:
  • Hof

  • München Fröttmanning

<div class="flix-connection flix-connection--warning">
  <h3 class="flix-connection__title">
    Fri 17 Oct 2016 <span class="flix-connection__day">+1 day</span>
  </h3>
  <ul class="flix-connection__list">
    <li class="flix-connection__item">
      <div class="flix-connection__station">
        <h3 class="flix-h3 flix-h3--space-flush">Berlin Alexanderplatz</h3>
      </div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T07:00">
          <span class="flix-h3 flix-h3--space-flush">07:00</span>
        </time>
        <del>
          <span class="flix-sr-only">Old time:</span>
          <time dateTime="2016-10-17T06:30">
            06:30
          </time>
        </del>
      </div>
    </li>
    <li class="flix-connection__item flix-connection__item--slot">
      <div class="flix-connection__content">
        <div class="flix-box flix-box--small">
          <i class="flix-icon flix-icon-bus flix-icon--primary"></i>Bus
          <p class="flix-text">Direction Munich central bus station</p>
        </div>
        <button class="flix-btn flix-btn--link">
          Hide 2 stops
          <i aria-hidden="true" class="flix-btn__icon flix-icon flix-icon-arrow-up"></i>
        </button>
        <div>
          <span class="flix-tag flix-tag--outlined flix-tag--small">
            <i aria-hidden="true" class="flix-icon flix-icon-wifi flix-icon--primary"></i>Free Wi-Fi
          </span>
          <span class="flix-tag flix-tag--outlined flix-tag--small">
            <i aria-hidden="true" class="flix-icon flix-icon-socket flix-icon--primary"></i>Sockets
          </span>
          <span class="flix-tag flix-tag--outlined flix-tag--small">
            <i aria-hidden="true" class="flix-icon flix-icon-luggage flix-icon--primary"></i>1 Hold luggage
          </span>
        </div>
      </div>
    </li>
    <li class="flix-connection__item flix-connection__item--current">
      <flix-icon class="flix-connection__icon" aria-hidden="true" name="bus" solid="" size="cover"></flix-icon>
      <div class="flix-connection__station">Leipzig central bus station</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T10:30">
          <strong>10:30</strong>
        </time>
        <del>
          <span class="flix-sr-only">Old time:</span>
          <time dateTime="2016-10-17T10:00">
            10:00
          </time>
        </del>
      </div>
    </li>
    <li class="flix-connection__item">
      <div class="flix-connection__station">Hof</div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T12:00">
          <strong>12:00</strong>
        </time>
      </div>
    </li>
    <li class="flix-connection__item">
      <div class="flix-connection__station">
        <h3 class="flix-h3 flix-h3--space-flush">München Fröttmanning</h3>
      </div>
      <div class="flix-connection__time">
        <time dateTime="2016-10-17T15:30">
          <span class="flix-h3 flix-h3--space-flush">15:30</span>
        </time>
      </div>
    </li>
  </ul>
</div>

Here we're also presenting the delay information with two time elements.

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.