← Back to Index

List Component Figma: listy card generic

Updated: 2026-07-01 09:33 ET

Audited: 2026-07-01 09:33 ET

Structural Properties Specification
ViewModel: ListViewModel : ContainerSurfaceViewModel : ComponentViewModel
Design tokens sourced from Figma file: ALPA mobile app (1).fig · Component: listy card generic

Link List variant (Teamwork mobile requirements, Space 4173)

The Link List (My MEC homepage) is a variant of this generic List: a vertical stack of full-width tappable rows. Each row = thumbnail image (left) + text label + heart/favorite icon (far right); the whole row is tappable. Favorited = heart filled / unfavorited = outline (state stored per user account). Tap opens the destination in an in-app webview. Current items: Quick Reference Guide → ALPA member login · UP-PAC Sign Up → UP-PAC form (pre-filled with profile data) · Help Hub → United Airlines login. Fields: Thumbnail (configured) · Label (configured) · Link Target (configured) · Favorite Toggle (user-controlled). Source: mobile-requirements — Link List; data source per Content Contract.

Design Tokens (from Figma)

Dimensions

Width
345 px
Height per item
105 px
Stroke weight
6 px
Content width
313 px
Timestamp row
21 px
Favorite icon
18×18 px

Colors

Card background
#FFFFFF
Timestamp / secondary
#5D6471
Title / primary text
#05273E
Status badge
#F7BB0D

Typography

Timestamp
Inter Regular 14px
Date label
Inter Bold 12px
Title
Futura PT Demi 20px
Secondary
Futura PT Book 16px

Layer Structure

[FRAME] listy card 345×105
  [FRAME] timestamp 345×21
    [TEXT] date #5d6471 Inter Regular 14px
    [INSTANCE] i-heart 18×18
  [FRAME] content 345×48
    [TEXT] datetime #05273e Inter Bold 12px
    [TEXT] title #05273e Futura PT Demi 20px
  [FRAME] flight 01 345×67
    [INSTANCE] status #f7bb0d 80×18
Vertical Stack Container Card Item 1 Card Item 2 Card Item 3 Spacing Items Card collection (ObservableCollection) Can contain any CardViewModel variant: • Card, ButtonCard, IconButtonCard • HeroCard, MultiButtonCard • TextCard (with/without Label) Vertical stacking behavior Example shown: 3 Buttons (icon variant) stacked with consistent spacing Each card fully independent

Figma Structural Specs

Dimensions & Layout

PropertyValue
Width345 px
Height105 px
Background Fill#ffffff
Stroke Weight6px

Layer Tree

[FRAME] Frame 545  345×73
  [FRAME] timestamp  345×21
    [TEXT] May 26, 2026  91×21  #5d6471  Inter Regular 14px
    [INSTANCE] i-heart  18×18
  [FRAME] content  345×48
    [FRAME] text  313×48
      [TEXT] May 12, 2026 5:40:00PM  219×17  #05273e  Inter Bold 12px
      [FRAME] Frame 545  313×26
        [TEXT] Lorem  53×26  #05273e  Futura PT Demi 20px
      [TEXT] Fri April 24  78×22  #05273e  Futura PT Book 16px
  [FRAME] flight 01  345×67  #ffffff
    [FRAME] status  313×51  stroke:#f3f6f7 sw:1
      [TEXT] DL 302  47×19  #05273e  Futura PT Book 16px
      [INSTANCE] status  80×18  #f7bb0d

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