Notification Card Flight Status Figma: notification card flight status domain control

Updated: 2026-08-27 08:24 ET

Audited: 2026-06-26

Live CSS Preview

Design Tokens

Variants

States (flight variant)

Comms variant

Captured from Notifications — Comms tab screen (parent page node notifications-comms 5060:15039, instances 5056:13946/13947). Same component name (notification card flight status), same container structure, different slot content. Implemented 2026-08-12 as CommsNotificationCard.razor, sharing the alpa-fsnc-* CSS block with the flight variant — one component in the design, one CSS block in code (the old alpa-notif-card row styles were removed). The drawn expander pill is empty in this variant and is rendered as drawn (decorative); the whole card remains the tap target, routed by the host through NotificationContentRouter — behavior the design does not address. Weblink rows open the app's auto-login AuthenticatedWebViewPage modal (renamed from WebViewPage, AB#2591) via IDocumentActionNavigator.NavigateToWebLinkAsync — the same path native's notification list takes — not the system browser (parity fix 2026-08-12: Safari bounced member-only links to a second login). The same card serves the live Comms tab and the read-state scenarios surface (/notifications/comms-scenarios), which inherits the redesign automatically.

The comms variant body text font size shows a fallback of 20px in the Figma export vs 18px for the flight variant, both using var(--font-size/body/m). Treat as the same token — confirm the token resolves to 18px with the design system.

Layer Tree

ViewModel

Tier: domain control. Spec-only ViewModel — not added to ComponentViewModels.cs until implementation.

Usage Context

Developer Notes

• Figma name "Underline Button": The caret-only expand button is named "Underline Button" in Figma — this is the same naming artifact as in the Duty Period Card. The shape is a white pill (border-radius:38px) with only a caret icon (no text). Do not add a text label to this button.
• Caret-only button: Unlike the Duty Period Card's outline pill (which shows a text label), this expand button contains only a 12×12px caret icon. The full-width pill provides a large tap target (entire card width, 18px height).
• Icon circle: The 44px circle is a generic icon slot (icon-generic in Figma). The inner image is 18×18px. The icon source is flight-status-specific — may be an airline logo or status icon from the notification payload.
• Route arrow: Figma shows "DEN » MIA" with a double-chevron (») separator. This is a text character, not an SVG. Use the Unicode right double angle quotation mark: U+00BB.
• Expanded state: delivered 2026-08-12 as the open variant (5054:13777) in the working file — see the Expanded row in the variants table. The design draws only the status row; everything else the implementation shows when expanded is implementation-defined (see the implementation callout).
• Comms tab variant: Confirmed via Figma (5060:15039). Same component, different slot content. Line 1 = category/source (Futura PT Demi 20px). Line 2 = article headline (Afacad SemiBold, body/m, wraps to multiple lines). Expand button present structurally but has no caret icon in the Figma static screen — confirm expand behavior with designer.
• Implementation gate cleared: the AB#2087 (Presentation Extraction) gate this spec was written under has been superseded — the card shipped as FlightNotificationCard.razor and was aligned to the delivered design 2026-08-12 (see the implementation callout at the top).

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: NotificationCardFlightStatus.razor.

Razor Usage (target)

@* Notifications page — Flight Finder tab *@
@foreach (var notif in Vm.FlightNotifications)
{
    <AlpaNotificationCardFlightStatus
        Timestamp="@notif.Timestamp"
        IconUrl="@notif.IconUrl"
        Route="@notif.Route"
        Date="@notif.Date"
        IsExpanded="@notif.IsExpanded"
        OnExpandToggle="@(() => notif.ToggleExpand())" />
}

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-notif-card-fs BEM block ("fs" = flight status).