A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Superseded by Voucher
Superseded by Voucher, as
Orientation=Horizontal at node 5372:38309. The state axis it never had now exists, the two stacked discount badges are one ⤷ DiscountSlot, and the discount baked into the image frame is a Badge instance. Kept as a record of the assessment that drove the consolidation.Live Preview
Default (all props on)
Minimal — header + price + validity
Migration
Replaced byVoucher Card Horizontal
DS Health
Reusable
Fail
All text content is hardcoded placeholder. Consumers cannot set a title ("Grab Food"), price (PHP 100.00), validity, or badge label without detaching. A "reusable" voucher component that can only render one frozen sample string is not reusable.
Self-contained
Warn
The symbol carries its own layout, spacing, and token-bound colors via
main/vouchers/color/default/*. But it ships two stacked discount Badge instances ("10% off" + "35% off") at the same anchor, assuming one is invisible — nothing in the schema picks between them.Consistent
Fail
Parallel to Vertical Voucher and Voucher Card Horizontal — three components for one concept. Voucher Card Horizontal ships a proper
state axis (Default/Limited/Expiring/Used/Expired); Horizontal Voucher ships none. Property shape diverges across the family (6 booleans here vs 8 in Vertical vs 2 booleans + 4-state enum in Voucher Card Horizontal).Composable
Warn
Nests Badge instances for the badge row (composition works). But the hero image is a raster asset baked into the frame, not a Voucher Asset instance — consumers cannot swap partner imagery without detaching. And since all voucher content is locked placeholder, a parent screen cannot compose real voucher data.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Hero image | N/A | N/A | asset boolean (raster frozen) | Currently a 336×144 raster with the "GrabFood" wordmark baked in. Should accept any Voucher Asset variant. |
| Discount amount | N/A | N/A | Two stacked Badges ("10% off" + "35% off") | Two Badge instances at the same anchor. Should be a single discount string property on the Voucher Asset, not two stacked layers. |
| Title | N/A | N/A | header boolean (string hardcoded) | "Grab Good" frozen in the symbol. Boolean only toggles visibility. |
| Description | N/A | N/A | description boolean (string hardcoded) | "This is the description of the voucher." frozen. |
| 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 | badges boolean (row of 4 hardcoded) | Single row of 4 fixed badge labels ("Limited", "Expiring", "Hot", "Discounted"). Row-level visibility only. |
| State | N/A | N/A | Not modelled | Absent entirely. Voucher Card Horizontal has it; Horizontal 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 (
text/color-text-inverse= white card surface), title (main/vouchers/color/default/label-title), description (label-description), amount (label-amount), strikethrough amount (rendered as#90a8d0, matcheslabel-amount-original), and metadata (label-metadata) are all bound to the voucher component's variable collection. C3 · Token Coverage - Card elevation is tokenised. The card uses
app/shadow/shadow-low(0px/0px/4px,elevation/app/shadow-low/colorrgba(2,14,34,0.06)). No hardcoded shadow values on the parent frame. C3 · Token Coverage
1.0.1 — September 2026Patch
Documentation backfill · node 5121:4533
Resolved issues recorded. 2 resolved issues on the Overview tab had no changelog row: Voucher content tokens exist; Card elevation is tokenised.
Docs1.0.0 — April 2026Major
Initial Assessment · node 5121:4533
Assessed with Consolidate verdict. Single symbol with no variants, 6 boolean toggles, hardcoded content, raster hero image, and two stacked discount Badges. Parallel to Vertical Voucher (
Design Decision5119:1635) 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