← Back to Index
CardHero Component Figma: card-lg
Audited: 2026-06-26
Structural Properties Specification
ViewModel: CardHeroViewModel : DocumentCardViewModel
Design tokens sourced from Figma file: ALPA mobile app (1).fig · Component: card-lg
Design Tokens (from Figma)
Dimensions
Image left accent
6 px border
Content area height
143 px
Colors
Image accent (Border/Blue-lt)
#007BC2
Accent — yellow variant (Border/Yellow)
Removed — DQ-2 resolved: blue only, static. Yellow variant will not be implemented.
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 18px (Body/M) lh=1.3× · was 16px
Layer Structure
[SYMBOL] card-lg 361×343
[RECT] img 361×200 · border-l 6 #007bc2
[FRAME] content 361×143
[FRAME] eyebrow #5d6471
[FRAME] body 313×76
[TEXT] title #05273e
[TEXT] description #05273e
Figma Structural Specs
Dimensions & Layout
| Property | Value |
|---|
| Width | 718 px |
| Height | 504 px |
| Background Fill | — |
| Stroke Weight | 1px |
Layer Tree
[FRAME] background illustration 465×500
[FRAME] Group 438×489
[VECTOR] Vector 50×56 #d2d4d6
[FRAME] Group 438×489
[VECTOR] [2 Vector paths]
[FRAME] Group 398×464
[VECTOR] [330 Vector paths]
[FRAME] Hero 477×539
[FRAME] Group 422 287×539
[TEXT] Moving Pilots
& Passengers Forward 287×132 #000000 Lora Regular 36px
[FRAME] Frame 422 280×102
[TEXT] As the world’s largest airline pilot union, we connect pilots to powerful resources and crucial support so their careers can continue to soar. 280×66 #05273e Futura LT Pro Medium 14px
[FRAME] Frame 391 181×24
[TEXT] OPTIONAL TEXT LINK 163×24 #007bc2 Futura LT Pro Bold 12px
[FRAME] Group 40 8×12
[BOOLEAN_OPERATION] Union 6×6 #007bc2
[ROUNDED_RECTANGLE] Rectangle 61 6×2 #ffffff
[VECTOR] Rectangle 61 6×2 #ffffff
[BOOLEAN_OPERATION] Union 6×6 #007bc2
[ROUNDED_RECTANGLE] Rectangle 61 6×2 #ffffff
[VECTOR] Rectangle 61 6×2 #ffffff
[FRAME] Group 437 477×251
[FRAME] Group 421 477×251
[FRAME] old angle 445×251
[FRAME] Mask group 344×241
[ROUNDED_RECTANGLE] Rectangle 142 344×241 #ffffff
[VECTOR] Vector 252×91 #007bc2
[FRAME] Mask group 251×435
[VECTOR] [3 Vector paths]
[FRAME] Group 446 —
[ROUNDED_RECTANGLE] Rectangle 135 667×518 #eaeaea
[FRAME] Adjusted 468×251
[FRAME] Mask group 354×247
[ROUNDED_RECTANGLE] Rectangle 142 354×247 #ffffff
[VECTOR] Vector 252×99 #007bc2
[FRAME] Mask group 251×452
[VECTOR] [2 Vector paths]
[FRAME] Group 446 —
[ROUNDED_RECTANGLE] Rectangle 135 667×518 #eaeaea
[FRAME] Frame 419 15×241
[LINE] Line 9 15×0 stroke:#05273e sw:1
[LINE] Line 13 7×0 stroke:#05273e sw:1
[LINE] Line 14 7×0 stroke:#05273e sw:1
[LINE] Line 15 7×0 stroke:#05273e sw:1
[LINE] Line 16 7×0 stroke:#05273e sw:1
[LINE] Line 17 7×0 stroke:#05273e sw:1
[LINE] Line 18 7×0 stroke:#05273e sw:1
[LINE] Line 9 15×0 stroke:#05273e sw:1
[LINE] Line 11 7×0 stroke:#05273e sw:1
[LINE] Line 10 7×0 stroke:#05273e sw:1
[LINE] Line 12 7×0 stroke:#05273e sw:1
[LINE] Line 13 7×0 stroke:#05273e sw:1
[LINE] Line 14 7×0 stroke:#05273e sw:1
[LINE] Line 15 7×0 stroke:#05273e sw:1
[LINE] Line 19 15×0 stroke:#05273e sw:1
[FRAME] Frame 386 37×9
[ELLIPSE] Ellipse 19 9×9 stroke:#ffffff sw:1
[ELLIPSE] Ellipse 18 9×9 #ffffff stroke:#ffffff sw:1
[ELLIPSE] Ellipse 20 9×9 stroke:#ffffff sw:1
Source: docs/ui-refresh-1821/figma-component-specs.json — Figma key(s): mobile hero — extracted 2026-06-02