← Back to Index

Card Component Figma: card-lg · welcome

Audited: 2026-06-26

Structural Properties Specification
ViewModel: CardViewModel : SurfaceViewModel
Design tokens sourced from Figma file: ALPA mobile app (1).fig · Components: card-lg · welcome
Two layouts. Standard — header, content text, optional link (the structural card-lg; full Figma layer tree in the Design Tokens below). Chevron — a compact, tappable card with a heading + optional link and a right-side chevron, no eyebrow / title / image, on a light-blue surface (used by the Welcome / pilot card). See the Chevron Variant section.

Design Tokens (from Figma)

Dimensions

Width
361 px
Height
343 px
Image area height
200 px
Content area height
143 px
Text content width
313 px
Favorite icon
18×18 px

Colors

Card background
#FFFFFF
Eyebrow text
#5D6471
Title text
#05273E
Body text
#05273E

Typography

Eyebrow / Label
Inter Bold 12px ls=5%
Title
Lora SemiBold 20px (Display/S) lh=1.2× · was 28px — revised 2026-06-10, Figma node 4033:1436 (confirm)
Body
Futura PT Book 16px lh=1.6×

Layer Structure

[SYMBOL] card-lg 361×343
  [RECT] img 361×200
  [FRAME] content 361×143
    [FRAME] favorite wrapper 361×18
      [INSTANCE] i-heart 18×18
    [FRAME] text wrapper 361×105
      [FRAME] eyebrow 313×17
        [TEXT] eyebrow label #5d6471
      [FRAME] body 313×76
        [TEXT] title #05273e
        [TEXT] description #05273e

Structural Diagram

Header Primary content text Link text HeaderText Header label (string) e.g., "Dashboard", "Updates", "News" ContentText Primary content text (string) e.g., "Welcome back", "New message" LinkText Link display text (string) e.g., "Learn More", "View Details" Link Link destination (string) Page name or URL

Figma Structural Specs

Dimensions & Layout

PropertyValue
Width361 px
Height343 px
Background Fill#ffffff
Stroke Weight1px

Layer Tree

Layer NameTypeSize (pt)FillNotes
imgROUNDED_RECTANGLE361×200— stroke:#007bc2 sw:6
contentFRAME361×143—
    favorite wrapperFRAME361×18—
        i-heartINSTANCE18×18—
    text wrapperFRAME361×105—
        eyebrowFRAME313×17—
            MEC GroupTEXT313×17#5d6471Inter Bold 12px opacity:0.5
        bodyFRAME313×76—
            United AirlinesTEXT313×24#05273eLora SemiBold 20px (was 28px, 2026-06-10)
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.TEXT313×44#05273eFutura PT Book 18px (was 16px, 2026-06-10)

Source: docs/ui-refresh-1821/figma-component-specs.json — Figma key(s): card-lg — extracted 2026-06-02

Chevron Variant (no title · navigational)

A compact, tappable Card with no eyebrow, title, or image — just a heading and an optional link, with a chevron on the right indicating tap-through navigation, on a light-blue surface. Source: Figma welcome / Welcome thing (node 4099:5230); rendered by the Welcome / pilot card.

Welcome Captain Johnson View Contract

Dimensions & Colors

Card size
361 × 77 px
Padding
16 px (--xsmall)
Body / gap
199 × 45 · gap 4 px
Chevron (Group 568)
~20 × 74 px, right
Surface (--blue/100)
#DFEDF9
Heading text
#05273E
Link / chevron stroke
#007BC2
Chevron fill
#7CB9F2

Typography

Heading
Lora SemiBold 16px lh=1.2× (display-heading/xs)
Link
Futura PT Book 18px underlined (body/m)

Layer Structure

[FRAME] welcome 361×77
  [FRAME] Welcome thing 341×77 #dfedf9 p=16
    [FRAME] body 199×45 gap=4
      [TEXT] heading #05273e Lora SemiBold 16px
      [TEXT] link #007bc2 Futura PT Book 18px underline
  [FRAME] Group 568 (chevron) 20×74 fill #7cb9f2 / #dfedf9 stroke #007bc2

Feed contract field: ItemDto.IsSortable (bool, default true) — when false, the comms team has locked this item's position in its container; the device user cannot reorder it (D36).

Source: Figma file R6hPjBdjSIn6946qTJasUC — node 4099:5230 · welcome / Welcome thing — extracted 2026-06-05