A 162-wide vertical voucher tile combining a Voucher Asset image with title, description, price, validity, and status badges.
Superseded by Voucher
Superseded by Voucher, as
Orientation=Vertical at node 5372:38309. The two asset sizes bundled into one symbol are now the AssetSize setting, the flat unlabelled layer structure is named throughout, and the raster image with its hardcoded "35% off" is a real slot plus a Badge. Kept as a record of the assessment that drove the consolidation.Live Preview
Default (all props on)
Large asset only
Small asset minimal
Migration
Replaced byVoucher Card Horizontal
DS Health
Reusable
Fail
All text content is hardcoded placeholder. Consumers cannot set a title, price, validity, or badge label without detaching. A "reusable" voucher component that can only render the sample "Buy Load Pre-seeded SKU Voucher Sample" string is not reusable.
Self-contained
Warn
The symbol does carry its own layout, spacing, and token-bound colors via
main/vouchers/color/default/*. But it ships two asset frames bundled together, assuming consumers will turn one off — nothing enforces the mutual exclusion.Consistent
Fail
Parallel to Horizontal Voucher and Voucher Card Horizontal — three components for one concept. Voucher Card Horizontal ships a proper
state axis (Default/Limited/Expiring/Used/Expired); Vertical Voucher ships none. Property shape diverges across the family.Composable
Warn
Nests a Voucher Asset instance (composition works) and Badge instances (composition works). But since the voucher content is locked placeholder, a parent screen cannot actually compose real voucher data into this component.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Asset size | N/A | N/A | largeAsset + smallAsset booleans | Two booleans for a mutually exclusive choice. Should be a single enum. |
| Title | N/A | N/A | header boolean (string hardcoded) | String is frozen in the symbol. Boolean only toggles visibility. |
| Price / original | N/A | N/A | amount boolean (strings hardcoded) | "PHP 100.00" and "PHP 150.00" frozen; one boolean toggles both. |
| Validity | N/A | N/A | validityPeriod boolean (string hardcoded) | "Validity: Dec 25 2022 - Jan 5 2023" frozen. |
| Status badges | N/A | N/A | prop1stRowBadges + prop2ndRowBadges | Two fixed rows of 2 fixed badge labels each. Row-level visibility only — consumers can't pick which badges to render. |
| State | N/A | N/A | Not modelled | Absent entirely. Voucher Card Horizontal has it; Vertical Voucher does not. |
| Tap target | N/A | N/A | Not modelled | Vouchers are always tappable; current symbol has no pressed/disabled states. |
Issues
- Voucher content tokens exist. Background (
main/vouchers/color/default/bg), title (label-title), description (label-description), amount (label-amount), strikethrough amount (label-amount-original), and metadata (label-metadata) are all bound to the voucher component's variable collection. C3 · Token Coverage
1.0.1 — September 2026Patch
Documentation backfill · node 5119:1635
Resolved issues recorded. 1 resolved issue on the Overview tab had no changelog row: Voucher content tokens exist.
Docs1.0.0 — April 2026Major
Initial Assessment · node 5119:1635
Assessed with Consolidate verdict. Single symbol with no variants, 8 boolean toggles, and entirely hardcoded content. Parallel to Horizontal Voucher (
Design Decision5121:4533) and Voucher Card Horizontal (5119:1786). OpenProposed family-level merge. Collapse the 3 voucher components into one
Design DecisionVoucher Card with orientation + state axes, text slots (title, description, price, originalPrice, validity), a badges array, and a voucher image Slot. Target: 2 × 5 = 10 variants instead of 3 divergent components. Open