Reference for the ALPA Mobile component library, in two layers — a reusable, domain-free scaffold (the components below) and domain controls that map real data onto it (decision D11). Rooted at ComponentViewModel; names & hierarchy settled. Reference reports are linked in the specifications index.
ViewModel Hierarchy
Card and Button share card-like chrome via SurfaceViewModel; content cards add content on CardViewModel; containers share a paintable wrapper via ContainerSurfaceViewModel (D26). Domain controls (e.g. Pilot Card) compose these rather than subclass them — Domain Controls →. Click a component to open its spec — full reference & sortable table →
The reusable, domain-free building blocks — nine components (Track A), grouped by role. Complex flight/duty-period cases use Track B typed ContentViews (see architecture). Compose these for a use case; don't fork them.
Content Surfacesbase: CardViewModel
Card Component
Base reusable card. Two layouts: Standard (header, content text, optional link) and Chevron (heading + link with a right chevron, no title — the Welcome / pilot card). Foundation for all card variants.
Card with optional eyebrow and title. Three variants, named by their leading element (simplest-first): Description (body only), Title (title + body), Label (label + title + body).
Home screen navigation tile (card-sm). Image left, title center, favorite heart right. Backed entirely by MenuItem — the simplest home component. Instances: DART, ALPA Directories, Committee Calendar, etc.
Content card with an embedded call-to-action button (decision D14). Two variants: Default (filled primary CTA) and Variant2 (outlined secondary CTA). ViewModel adds CallToAction : ButtonViewModel to the inherited Header and ContentText. Four feature instances: My MEC, Jump Seat, Committees, PAC/Take Action.
Action Controlbase: SurfaceViewModel (shared with cards)
Button Component
Action button for primary actions and navigation. An optional leading Icon drives the variant: absent → text-only; present → icon + text. (Absorbs the former Icon Tile — an icon is an optional property, not a separate component.)
Fixed 3-column grid of ButtonCardViewModel items. Auto-flows items in collection order — no coordinate placement. v1 scope: phone only, card-btn only. Used in My MEC (MEC Actions + Quick Links sections). Flexible column count and mixed content types are deferred extensions.
Horizontal scrollable collection of cards. Has title, optional "View All" link, and accepts any CardViewModel variant in its Items collection. Container for presenting multiple related cards.
Added in the 2026-06-10 Figma re-sync (decisions D12–D14): Nav chrome (Top/Bottom
Navigation, Nav Controls, Navigation Drawer, Segmented Control) · Atoms (NavItem,
Badge, Info Block, Endpoint, Logo, Back) · Primitives (Form Field, Progress Bar,
Section Title) · Page templates (Page/Interior/Feed) · Domain controls
(Flight Card/Segment/Detail, Duty Period). Per-component provenance, structure, variants, and dev
notes are in the catalog; full per-folder pages land as each is built (AB#2087).