Page Compositions — Component Assembly Reference

Updated: 2026-07-06 18:48 ET · Audited: 2026-07-01 09:33 ET · Epic AB#1821 · 11 screens

Per-screen breakdown of which components appear in each slot, in what render order, bound to which ViewModel, and fed from which data source. Use this alongside the Page Template spec (scaffold / padding / margins) and individual component specs. For visual reference, call get_screenshot(nodeId) on the Figma node listed in each header to see the live design.

How to read this doc: Each page section lists slots top → bottom. Fixed chrome (top nav, bottom nav) appears in every page — only noted once per page, not repeated. "Root section" = no back button, content starts immediately under top-nav clearance. "Interior sub-page" = has the 38px nav-controls bar (back + title + optional icon). Data sources labelled Dynamic Feed API mean the server-driven PageDto contract.

#	Component	ViewModel	Data source	Notes
—	Top Nav (fixed chrome)	—	—	White bar, drop-shadow. Icons: avatar, heart, bell, search (left) · hamburger (right)
1	Welcome Banner	WelcomeBannerViewModel	`GET /api/user/profile` GreetingText, LinkText?, LinkUrl?	MEC-themeable bg via BackgroundToken. Home variant: blue/100 #dfedf9. Optional "View Contract" CTA link.
2	Carousel — "New & Notable"	CarouselViewModel → items: CardHeroViewModel[]	Dynamic Feed API `ContainerDto type:"carousel"` items type:"card-lg"	Horizontal scroll. card-lg with blue/yellow accent. Title "New & Notable", "View All" link. ShowEyebrows: true.
3	Button Group (3-up tiles)	ButtonGroupViewModel → items: ButtonViewModel[] (IsTile:true)	Static config / CMS menu `MenuItemDto[]`	3-column grid of icon-tile buttons (e.g. KCM, Quick Ref Guide, Hotline). Icon + label below.
4	Carousel — "Feed"	CarouselViewModel → items: mixed (card-lg / card-md)	Dynamic Feed API `ContainerDto type:"carousel"`	Mixed card types. card-lg for featured, card-md for text items. ShowEyebrows: true.
5+	Additional carousels / card-btn / card-md sections	TBD — Home layout is draft	Dynamic Feed API `PageDto sections[]`	Home screen shown in Figma is a UAL MEC prototype. Final layout TBD post-#2087. Use Figma node 4099:5229 screenshot at implementation time.
—	Bottom Nav (fixed chrome)	—	—	Navy #05273e. 5 items: Home · Jumpseat · KCM · FTDT · My MEC

96px pb on slot-main feed — last section clears bottom nav.
Home layout is explicitly marked tentative in Figma (draft MEC view). Do not build Home until the final layout is confirmed.
MEC-themed Home variant uses different WelcomeBanner BackgroundToken (e.g. united-brand/blue-800).

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—	Standard top nav chrome
1	Button Pill (tab switcher)	ButtonPillViewModel (spec-only)	Static — 2 tabs	Tabs: "COMMS" \| "FLIGHT STATUS". Futura PT Demi 15px uppercase. Inactive: white bg; Active: #007bc2 bg white text.
When "COMMS" tab active
2a	Comms notification rows	TBD — likely ListViewModel or card-sm	Push notifications API `GET /api/notifications?type=comms`	Comms tab content not fully captured in audit. Likely text-based notification rows. Confirm from node 5060:14989 screenshot.
When "FLIGHT STATUS" tab active
2b	Notification — Flight Status × N	NotificationFlightStatusViewModel	Flight status API `GET /api/notifications?type=flight` Fields: airline icon, route, date, timestamp	White cards, border-b #d2d4d6. Unread state: --unread modifier. Expand caret (38px pill) opens detail. Timestamp right-aligned Inter Regular 14px.
—	Bottom Nav	—	—

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "KCM" · Back button · no right icon
1	Interior Tab Nav	—	Static — section tabs	KCM sub-sections (e.g. Overview / History / Airports). Active: Futura PT Demi; Inactive: Afacad SemiBold.
2	Toggle Switch — "Acclimated"	ToggleSwitchViewModel	User preference `Settings.KcmAcclimated`	Adjacent label "Acclimated" rendered by page — not embedded in the component. iOS HIG toggle style.
3	KCM Table	KcmTableViewModel	KCM status API `GET /api/kcm/status`	Grid of airport codes with KCM eligibility status. Documented in new-components-2026-06-10.html.
4	Card Small (card-sm) × N	CardSmallViewModel	KCM API items `GET /api/kcm/resources`	80px image + title list rows for KCM reference resources. Full-width, border-b #d2d4d6.
—	Bottom Nav	—	—

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "Internal Comms" · Back · no right icon
1	Card Small (card-sm) × N	CardSmallViewModel	CMS content list `GET /api/comms/internal` Fields: title, image, link	Scrollable list of comms articles. 80px image left + title right. Tapping navigates to article detail.
—	Bottom Nav	—	—

Simplest page structure in the app — a single scrolling card-sm list. Confirmed by Figma audit.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "Member Resources" · Back · no right icon
1	Card Small (card-sm) × N	CardSmallViewModel	CMS resources list `GET /api/member/resources` Fields: title, image, link	Identical pattern to Internal Comms. Scrollable card-sm list. Same component, different data source.
—	Bottom Nav	—	—

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "Advocacy" · Back · no right icon
1	Secondary Button — Rectangular	ButtonViewModel (Style:Secondary, Shape:Rect)	Static — label "DONATE & JOIN" Link: external donate URL	Full-width rectangular outline button. 1px navy border, no radius. Futura PT Demi 15px uppercase.
2	Card Notification × N	CardNotificationViewModel	CMS advocacy content `GET /api/advocacy/items` Fields: text, link	Text-only disclosure rows. Navy bottom border (#05273e). Each row: label left + chevron right. Tapping navigates to detail.
—	Bottom Nav	—	—

The rectangular outline button is the CTA; the card-notification rows are the content list below it.
The navy border on card-notification (#05273e) is distinct from the standard list border (#d2d4d6) — do not swap.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—	Heart icon in top-left nav is the active state indicator for this section
1	Card Large (card-lg) × N	CardHeroViewModel (IsFavorite: true)	Favorites API `GET /api/favorites` (Change 3 — in progress) Fallback: `Settings.FavoriteItemIdsJSON`	card-lg in full-width mode (361px). Heart overlay shown (IsFavorite:true, active state red). 2px bottom accent border. Tapping heart removes from favorites.
—	Bottom Nav	—	—

Favorites API (Change 3) is in progress with the backend team — Favorites page blocks on delivery. See memory entry "Backend API Changes Status".
Empty state (no favorites) UI not captured in Figma audit — confirm behavior from design before implementing.
The IsFavorite heart on card-lg is active (filled red) on this page — all items shown are already favorited.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "Flight Finder" · Back · no right icon
1	Button Pill (tab switcher)	ButtonPillViewModel (spec-only)	Static — 2 tabs	Tabs: "ONE WAY" \| "ROUND TRIP" (or similar). Controls form layout below.
2	Form section — blue bg container	—	—	Blue bg (#007bc2) section wrapping the labeled form fields. 16px padding, 8px corner radius.
2a	Form Field — Labeled (Departure)	FormFieldViewModel (Variant:Labeled)	User input → flight search query	White label "Departure Airport" (Afacad SemiBold 16px white) + white input box. No leading icon.
2b	Form Field — Labeled (Arrival)	FormFieldViewModel (Variant:Labeled)	User input → flight search query	White label "Arrival Airport" + white input box.
2c	Form Field — Labeled (Date)	FormFieldViewModel (Variant:Labeled)	User input (date picker)	White label "Date" + white input box. Tapping opens native date picker.
3	Search Secondary Buttons (3-up)	SearchSecondaryButton (scaffold/atom, D42)	Static — fixed action set	3-column row. Each: 88px wide, 22px icon + 2-line Futura PT Demi 15px uppercase label (e.g. "NON STOP / FLIGHTS"). Spec resolved 2026-07-02 (D42) — see linked component page.
4	Secondary Button — Pill-38	ButtonViewModel (Style:Secondary, Shape:Pill38)	Static — label "ADVANCED SEARCH"	38px radius outline pill. 1px navy border. Leads to advanced search form.
5	Flight search results	TBD — FlightSearchResultViewModel	Flight search API `POST /api/flights/search`	Results layout not captured in audit — confirm from Figma. Likely card-sm or flight-segment-card items.
—	Bottom Nav	—	—

The "Search Secondary Buttons" (slot 3) are a 3-up icon-button pattern, resolved 2026-07-02 as scaffold/atom tier, code name SearchSecondaryButton (D42) — see search-secondary-button-component.html.
The blue form container (slot 2) is a page-level div, not a component — the component is the form-field inside it.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—	Same white top nav — MEC theming does not change top nav chrome
1	Welcome Banner	WelcomeBannerViewModel (BackgroundToken: united-brand/blue-800)	`GET /api/user/profile` + theme token `GET /api/theme/{mecId}`	MEC-branded bg color (e.g. UAL: united-brand/blue-800). LinkText: "View Contract". Same component as Home, different token.
2	Button Pill (tab switcher)	ButtonPillViewModel (spec-only)	Static — MEC sections	MEC content section tabs (e.g. "NEWS" \| "RESOURCES" \| "EVENTS"). Controls content below.
3	Card Large (card-lg) × N	CardHeroViewModel (AccentColor: united-brand/blue-500)	MEC content API `GET /api/mec/{mecId}/content` type:"card-lg"	MEC-branded accent: united-brand/blue-500 #0008ce (UAL). 2px bottom border. No eyebrow on some variants.
4	Card Text / Medium (card-md) × N	CardTextViewModel (Image: null — no-image variant)	MEC content API `GET /api/mec/{mecId}/content` type:"card-md"	250px width, no image (Image:null collapses image slot). Title + Description + optional NewCount badge (red).
5	Secondary Button — Full Pill	ButtonViewModel (Style:Secondary, Shape:PillFull) + --white modifier (on dark card)	Static — label "SIGN UP FOR TEXT ALERTS"	100px radius, 2px border. When inside a dark MEC card: white border + white label (--white modifier). Wires to SMS opt-in flow.
—	Bottom Nav	—	—	Bottom nav shows "My MEC" active item

MEC page is the canonical example of the theme token system — every accent color comes from GET /api/theme/{mecId} resolved via IThemeResolver. Never hardcode UAL-specific colors.
Figma annotation: "restyle, don't rebuild" — same components, different token values per MEC. See MEC Onboarding Hub.
The WelcomeBanner "View Contract" link target comes from MEC config, not user profile.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—	Search icon in top nav triggers this page
1	Form Field — Search	FormFieldViewModel (Variant:Search, HasLeadingIcon:true, HasClearButton:true)	User input → live autocomplete query	White bg, invisible border, leading search mag icon, trailing × clear button. Fixed at top of content area (inside pt-120px zone). Fires OnValueChanged on every keystroke.
2	Form Field — Result Row × N	FormFieldViewModel (Variant:ResultRow)	Search autocomplete API `GET /api/search/suggest?q={value}`	Text-only rows, border-bottom #d2d4d6, no icons. Populated as user types. Tapping a row fires OnResultSelected and navigates to result.
—	System Keyboard (iOS)	—	—	Native iOS keyboard overlays bottom portion. Search input is focused on page entry. Keyboard dismisses on result select or scroll.
—	Bottom Nav	—	—	Hidden behind keyboard when active

Search page background is #f5f7fa — the white search input floats visibly against it.
The result rows (slot 2) replace the system keyboard area as the user types — the two do not co-exist at the same scroll position.
Two border color sets: search input uses white border (invisible); result rows use #d2d4d6 (visible). Never swap.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
—	Nav-Controls Bar	—	Static	Title: "Airline Policies" · Back (left) · Search mag icon (right) — right icon opens Search overlay
1	Form Field — Nav Row × N	FormFieldViewModel (Variant:NavRow, HasChevron:true)	Airline policies list `GET /api/policies/airlines` Fields: name (text), link (policy doc URL)	Full airline list (A–Z). Airline name left + chevron right + border-bottom #d2d4d6. Tapping navigates to that airline's policy document.
—	Bottom Nav	—	—

Nav-controls bar has a right-side search icon — tapping it should open the Search overlay (node 4951:11891), filtered to airline policy content.
The nav-row variant of form-field is used here (not card-sm) — no image slot, text only, chevron trailing.

#	Component	ViewModel	Data source	Notes
—	Top Nav	—	—
1	Toggle Switch — "Acclimated"	ToggleSwitchViewModel	User preference `Settings.FtdtAcclimated`	Adjacent label "Acclimated" rendered by page layout. iOS HIG toggle. Affects duty-time calculation display.
2	Progress Bar × N	ProgressBarViewModel	FTDT API `GET /api/ftdt/summary` Fields: label, value, min, max	Flight time / duty time tracking bars (e.g. "8-IN-24", "FAR 117"). Value, label row, min/max row. Multiple bars stacked.
3	Duty Period × N	DutyPeriodViewModel → items: FlightSegmentViewModel[]	FTDT schedule API `GET /api/ftdt/schedule` Fields: date, flights[], status	Each duty period card contains flight segment cards. "MANAGE" button on each: button-secondary pill-38. Status badge (on-time / delayed / etc.).
—	Bottom Nav	—	—	FTDT icon active in bottom nav

Implementation gated on Epic AB#1908 (FTDT) in addition to AB#2087 (Presentation Extraction). See FTDT Gate memory entry.
FlightSegmentViewModel lives inside DutyPeriodViewModel as a child collection — not rendered standalone on this page.

ALPA Mobile Team · Component Specifications · Epic AB#1821

Component Index · Page Template · Screen Mapping · Dynamic Feed API