Card Large Figma: card-lg container tier Home: tentative

Updated: 2026-08-27 09:53 ET

Audited: 2026-07-09 21:15 ET

Live CSS Preview

Design Tokens

Variants

Layer Tree

ViewModel

Tier: container. Extends DocumentCardViewModel (which extends CardViewModel → SurfaceViewModel). DocumentCardViewModel already carries Eyebrow, Title, Description, Image, and AccentColor — no new ViewModel needed.

Note: IsFavorite comes from CardViewModel. The heart is rendered — D7 (heart hidden on CardTextViewModel) was reversed 2026-08-27; card-md now shows the heart too, so this is no longer a card-lg-only distinction.

Usage Context

Developer Notes

• Image focal point: Figma annotation explicitly flags "expect variable crop/aspect; define focal-point / fit rules." Use object-fit:cover with a configurable object-position driven by CMS metadata.
• Accent token resolution: AccentColor holds the token name ("interactive/blue-lt", "border/yellow", or "united-brand/blue-500" for UAL MEC) — never a raw hex. Resolve via IThemeResolver.ResolveColor() at render time so MEC theming can override. The accent renders as a 2 px bottom border on the image slot (border-bottom: 2px solid), NOT a left border.
• Eyebrow vs description exclusivity: The two observed layouts are: (A) eyebrow + title, (B) title + description. Never both together based on Figma. Implement as two layout modes driven by Eyebrow != null vs Description != null.
• Favorite heart — implemented 2026-07-08. D7 originally suppressed the heart on CardTextViewModel list items while card-lg showed one (D31 amends D7); D7 itself was reversed 2026-08-27, so card-md renders the same heart now (CardText.ShowFavorite/IsFavorite/OnFavoriteToggle, Figma node 4718:11125). Wired in CardHero.razor as ShowFavorite/IsFavorite/OnFavoriteToggle parameters — the card stays presentational; the consuming page (e.g. FavoritesPage.razor, HomePreviewPage.razor) wires the callback to the live Favorites API (WI 2182, Change 3 delivered) and gates ShowFavorite on IAuthentication.IsLoggedIn and on the item having a stable id (no id → no heart, never a dead control). States (verified against the Figma i-heart variant set 5192:15185, 2026-07-09): off = navy outline (icons/heart.svg), on = filled navy #05273E (icons/heart-selected.svg) — an earlier build filled it red; navy is the design-correct on-state.
• Image fallback — added 2026-07-09. A feed item with a missing or failing image URL falls back to the Figma mock's placeholder art (/images/figma/cockpit.jpg / pilots.jpg, alternating deterministically by title) instead of an empty media slot.
• Title truncation: Figma annotation says "length varies." Apply overflow:hidden; text-overflow:ellipsis with a max-lines constraint (suggest 3 lines) to prevent card height explosion in carousels.
• Home screen context: This spec is derived from a draft MEC home view (UAL MEC shown). The actual Home layout is not yet delivered. The component structure is confirmed reusable across the "New & Notable" and "Feed" sections.
• Implementation: CardHero.razor (renamed from HeroCard.razor, D59) lives in ALPAMobile.Presentation/Components/Library/ — the RCL extraction of the component library happened 2026-07-15 (WI-2254/D61). Used by the Favorites/home-preview screens landed with WI 2182. ALPAMobile.HybridUi is the pre-development prototype codename for that RCL (used across the planning-era spec docs); the project that materialized under that plan is ALPAMobile.Presentation.

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: CardLarge.razor. Uses DocumentCardViewModel — no new ViewModel required.

Razor Usage (target)

@* Carousel — fixed 320px width, AccentColor from CMS category *@
<AlpaCardLarge Vm="@card"
               OnFavoriteToggle="@ToggleFavorite"
               OnTap="@NavigateToArticle" />

@* Full-width list item — width controlled by parent layout (361px context) *@
<AlpaCardLarge Vm="@featuredCard"
               OnTap="@NavigateToArticle" />

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-card-lg BEM block.