← Back to Index

Flight Segment Card Component Figma: flight card-og New · D15/D16 D16 Track B · D17

Structural Properties Specification — Track B Display Data Reference
Implementation: FlightCardView : ContentView  ·  8 BindableProperty fields (D16 field list · D17 implementation)
Design tokens sourced from Figma: ALPAmobileWtablet_20260617 (2026-06-16)  ·  Component: flight card-og  ·  Node (.fig): 5452:679  ·  Node (live): 4713:19868  ·  Scope: phone (tablet deferred — D12)
Decision D16 (adopted 2026-06-22, amended by D17): the flight card layout requires 8 independently-bound typed fields — StatusBadge carries a color value, and force-fitting into base CardViewModel (Header / ContentText / Link) would require concatenating ≥6 fields into ContentText, exceeding the DQ-9 reuse threshold. See Decisions Record → D16 and D15.

Decision D17 (adopted 2026-06-22): Flight Card is implemented as FlightCardView : ContentView (Track B) rather than FlightSegmentCardViewModel : CardViewModel (scaffold). The 8 typed field definitions from D16 are preserved as BindableProperty fields on FlightCardView; the implementation moves out of the scaffold hierarchy. FlightCardFactory : RawRepresentationFactory<FlightSegmentCardViewModel> is replaced by direct property binding. This spec page is the Track B display-data reference. See Decisions Record → D17.

Design Tokens (from Figma)

Dimensions

Width
353 px (phone content width)
Height — Default
164 px
Height — Swipe
164 px
Height — Expanded
1361 px
Border radius
8 px
Padding
12 px top/bottom · 14 px left/right

Colors

Background
#ffffff  Surface/Default
Border
#e3e3e3  Border/Default
City codes / times
#05273e  Text/Primary
Route line / meta
#9ba1a8  Text/Secondary
Swipe action / Delayed
#c02126  Status/Error
Status: On Time
#1a7340  Status/Success

Variants

Three named states driven by Property 1 in Figma. All phone-scope — tablet variant (flight card-TABLET) is deferred per D12.

Decision D64 (adopted 2026-07-18): the Blazor pages get their own Track A implementation of this master — FlightCard.razor + FlightCardViewModel + FlightCardFactory (ALPAMobile.Presentation), rendering the live master’s Default and expanded (4713:19985) variants with inline expand (retires the static /jumpseat/details page, audit FF-1/FF-4 — AB#2299). Track B native is unchanged. CSS prefix alpa-fcard-*. See Decisions Record → D64.

Decision D66 (adopted 2026-08-14): amends D64's "results no longer navigate" for the push entry point only. A tapped flight alert opens a dedicated JumpseatFlightDetailPage (/jumpseat/flight-detail) that composes this same component through a new ExpandLocked parameter — the expanded variant rendered permanently, with no chevron at either end. The lock is a render decision and never writes IsExpanded, so a ViewModel shared with a results row keeps that row's own state. Results cards still expand inline exactly as D64 decided. See Decisions Record → D66.

⚠️ Generic variant names in Figma component set: Beyond the three named states below, the flight card-og component set contains additional variants labeled Variant4 and Variant5 — Figma's auto-generated names that carry no semantic meaning. These must be mapped by visual inspection of the canvas to determine what interaction state or content configuration they represent. The same pattern applies to other component sets in this file (e.g. Variant2). Do not assume Variant4/5 represent the same interaction as the named variants; verify each by appearance before speccing or implementing.
Figma variantWidthHeightDescription
Property 1=Default353 px164 pxCollapsed card showing origin/destination, departure/arrival times, and status badge.
Property 1=swipe353 px164 pxSame dimensions as Default; swipe-action affordance visible on trailing edge (red delete/action strip).
Property 1=expanded353 px1361 pxFully expanded detail view — trip row, layover info, multi-leg detail, "Close Details" underline button.
Property 1=Variant4TBDTBDUnnamed — map by appearance. Visual inspection required to identify this state.
Property 1=Variant5TBDTBDUnnamed — map by appearance. Visual inspection required to identify this state.

Live CSS Preview

Default (collapsed · 164 px)
ORD
SFO
6:13 AM
4h 30m
8:43 AM
UAL 423  ·  Boeing 737
ON TIME
Swipe (164 px)
ORD
SFO
6:13 AM
4h 30m
8:43 AM
UAL 423
DELAYED
🗑

Expanded state (1361 px) not previewed here — multi-leg detail view; see Figma node 4713:19985 for full layout.

BindableProperty Fields (Track B — FlightCardView : ContentView · D17)

└── FlightCardView : ContentView Track B · D17
    ├── Origin : string — IATA departure code (e.g. “ORD”)
    ├── Destination : string — IATA arrival code (e.g. “SFO”)
    ├── DepartureTime : string — formatted time (e.g. “6:13 AM”)
    ├── ArrivalTime : string — formatted time (e.g. “8:43 AM”)
    ├── Duration : string — formatted duration (e.g. “4h 30m”)
    ├── FlightNumber : string — airline + flight number (e.g. “UAL 423”)
    ├── AircraftType : string — aircraft model (e.g. “Boeing 737”)
    └── StatusBadge : string — status text (e.g. “ON TIME”, “DELAYED”) — color resolved by XAML trigger

Domain Control

The Flight Card domain control uses this typed ContentView directly. A single domain control covers the full flight card Figma family — all masters represent the same visual component in different states or contexts (decision D15). Direct property binding replaces the former factory pattern (D17).

Domain controlImplementationDomain sourceSpec
Flight Card Track B FlightCardView : ContentView — direct BindableProperty binding Flight / Leg domain model (source TBD) domain-controls.html → Flight Card

Figma Variant Map

All five Figma masters unified under one domain control per D15. Node IDs are from the .fig binary archive (ALPAmobileWtablet_20260617).

Figma masterNode (.fig)Live Figma nodeDimensionsContext
flight card-og5452:6794713:19868353 × 164 (Default/Swipe) · 353 × 1361 (Expanded)Authoritative phone master. Replaces retired flight segment card (D15).
flight segment card4555:7483353 × 164Retired alias (D15, 2026-06-22). Preserved in figma-component-specs.json for provenance only.
flight card-TABLET5500:44TBDTablet tier — deferred per D12.
flight card-recent searches4441:3984450:11208353 × 115Superseded (D48, 2026-07-06) — this node is a usage-context instance of flight card-saved & recent searches (node 4450:9884, code name FlightCardSavedAndRecentSearches), not a separate master. Swipe-to-favorite context specifically.
flight card-saved flightRetired (D48, 2026-07-06) — a stale 2026-06-17 placeholder entry, superseded by flight card-saved & recent searches below.
flight card-saved searches4450:10395353 × 115Superseded (D48, 2026-07-06) — this node is a usage-context instance of flight card-saved & recent searches (node 4450:9884), not a separate master. Swipe-to-delete context specifically.
flight card-saved & recent searches4450:9884393 × 465 (Default 353×61, Variant2 353×340)Current consolidated master (D48) — code name FlightCardSavedAndRecentSearches. Composes the two usage-context rows above.

Implementation Notes