Connection Container

Scannable flight journey summaries with on‐demand detail access.

In this page
JIRA: CV‐43925
November 3rd, 2025

Functional & Direct

Progressive Disclosure Component

The Connection Container displays summarized flight connection information within the Flight Card, allowing users to view journey overview at a glance or expand to see comprehensive leg‐by‐leg details. This component is designed to balance information density with usability, providing essential context by default while keeping detailed flight information just one click away. The component uses a "show/hide flight details" toggle link to transition between states.

November 3rd, 2025

Collapsed State

In its collapsed state, the container shows departure/arrival times, airports, flight numbers, total duration, and stop count.

  • Clean, scannable summary that mirrors the original design
  • The "show flight details" link with dropdown chevron is perfectly clear
  • Duration and stop count remain prominent in the center
  • Flight numbers with airline logos at endpoints provide quick context
See Design
View Specifications
November 3rd, 2025

Expanded State

When expanded, users can access complete flight information including dates, airline details, aircraft type, operating carriers, layover durations, and timezone indicators.

  • Information hierarchy ‐ The airline/flight/aircraft/class line is organized with clear separators
  • Operated by info ‐ Clearly shows share arrangements in a subtle gray
  • Smart date/time layout ‐ The date above the time works, and the timezone indicators (PDT, BST, CEST) are crucial for international travel
  • Duration labels ‐ Right‐aligned "Duration: 2h 10m" keeps things organized
  • Layover treatment ‐ The clock icon with gray background creates clear visual separation
  • "Arrives Thu, Apr 23" in red ‐ Highlights the arrival date change
See Design
View Specifications