Surface

Card.Goal

View in Figma

A compact savings-goal card that groups a goal avatar, title, progress amounts, and a linear progress bar into a single elevated surface. Exposes four axes: goal title text, current and target amounts, and an optional boost indicator icon.

Overview

A compact savings-goal card that groups a goal avatar, title, progress amounts, and a linear progress bar into a single elevated surface. Exposes four axes: goal title text, current and target amounts, and an optional boost indicator icon.

🌸
Japan Trip
$1,250.00 / $2,500.00

Anatomy

CardGoal
🌸
Japan Trip
$1,250.00 / $2,500.00
  1. 1Container  required
  2. 2Root  required
  3. 3Container.Content  required
  4. 4Visual  required  Avatar instance (type=initials, size=md, shape=circle). Shows goal emoji or initials.
  5. 5Container.Content  required
  6. 6Container.Header  required
  7. 7Label.Title  required
  8. 8Icon  optional  Boost indicator icon. Visible only when hasBoostIndicator is true.
  9. 9Container.Amount  required
  10. 10Label.AmountCurrent  required
  11. 11Label.AmountSeparator  required
  12. 12Label.AmountTarget  required
  13. 13IconTrailing  required  Trailing chevron icon (IconWrapper, size=sm 16). Indicates the card is tappable.
  14. 14ProgressBar  required  Feedback / ProgressBar (orientation=horizontal, type=linear). 4pt tall, full width.

Measurements

🌸
Japan Trip
$1,250.00 / $2,500.00
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Card surface fill
colorBackgroundElevatedPrimary
#FFFFFF
Corner radius
radiusMd
12pt
Padding (all sides, 16pt)
spacingPaddingXl
16pt
Gap between content row and progress bar
spacingGapPositiveSm
6pt
Content
Label.Title text and Label.AmountCurrent text
colorContentPrimary
#0C1828
Label.AmountSeparator and Label.AmountTarget text
colorContentSecondary
#6D747E
Boost indicator icon (when hasBoostIndicator = true)
colorContentAccent
#4B56C7
Trailing chevron icon
colorContentTertiary
#8E959D
ProgressBar
ProgressBar track (unfilled portion)
colorBackgroundAccentPrimarySubtle
#4B56C71F · 12%
ProgressBar fill (completed portion)
colorBackgroundAccentPrimary
#4B56C7

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
labelTitletextJapan Trip
labelAmountCurrenttext$1,250.00
labelAmountTargettext$2,500.00
hasBoostIndicatorboolean

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.