CardText Component - Structural Specification

Design Tokens (from Figma)

Dimensions

Width

250 px

Height

148 px

Image area height

200 px

Content width

202 px

Notification badge

18×18 px r=30

Favorite icon

18×18 px

Colors

Card background

#FFFFFF

Label / title / body text

#05273E

Notification badge fill

#C02126

Badge count text

#FFFFFF

Typography

Label (overline)

Inter Bold 12px ls=5% op=0.5

Title

Lora SemiBold 20px lh=1.2×

Body

Futura PT Book 16px lh=1.6×

Badge count

Inter Bold 12px

Layer Structure

          [SYMBOL] card-md 250×148

            [RECT] img 250×200

            [FRAME] content 250×122

              [FRAME] eyebrow #05273e op=0.5

              [FRAME] body 202×98

                [TEXT] title #05273e Lora SemiBold 20px

                [TEXT] body #05273e Futura PT Book 16px

            [FRAME] status 250×26

              [FRAME] badge #c02126 18×18 r=30

              [INSTANCE] i-heart 18×18

Description — description only

Title — title + description

Label — label + title + description

Figma Structural Specs

Dimensions & Layout

Property	Value
Width	250 px
Height	148 px
Background Fill	`#ffffff`
Stroke Weight	1px

Layer Tree

[ROUNDED_RECTANGLE] img  250×200  #000000

[FRAME] content  250×122

  [FRAME] eyebrow  202×17

    [TEXT] MEC Group  78×17  #05273e  Inter Bold 12px opacity:0.5

  [FRAME] body  202×98

    [TEXT] United Airlines  202×24  #05273e  Lora SemiBold 20px

    [TEXT] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.  202×66  #05273e  Futura PT Book 16px

[FRAME] status  250×26

  [FRAME] new  18×18  #c02126

    [TEXT] 11  18×17  #ffffff  Inter Bold 12px

  [INSTANCE] i-heart  18×18

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: docs/ui-refresh-1821/figma-component-specs.json — Figma key(s): card-md — extracted 2026-06-02

CardText Component Figma: card-md