Carousel Card — GCash DS Assessment

KeepNeeds Refinement

A tappable card used inside a horizontally scrolling carousel — banner, title, description, and an optional price. Comes in three versions: Default, With Icon, and Discount.

Keep — rebuilt, cleaned up, and ready for handoff

All four DS Health traits pass. The old type setting became three independent ones — Variant (Default / With Icon / Discount), isLoading, and isPressed. Banner, icon, and violator are real slots. Discount Card merged in as a Variant value, taking the Carousel family from 5 components to 3. The follow-up pass cleared the last of the layer-naming drift: all eight versions now share one anatomy and one vocabulary. Code Connect stays unmapped because the native library doesn't exist yet — that's a dev-side dependency, not a design gap.

In Context

Carousel Card lives in a horizontal scroller — typically a "Featured" or "For You" rail on a home or category screen. Cards are peeked (part of the next one visible) to signal scrollability.

Live Preview

Title

Description here.
Description here.

Content

title

description

amount

⤷ Violator

Properties

Variant

isLoading

isPressed

DS Health

Reusable

Pass

Slots for banner, icon, and violator let one card serve featured, services, and discount rails. Absorbing Discount Card took the Carousel family from 5 components to 3.

Self-contained

Pass

Banner, icon, and violator are real slots with sensible defaults. The placeholder image and its purple dimmer sit inside the swappable Asset, so dropping in real media replaces both.

Consistent

Pass

All eight versions share one anatomy and one vocabulary — Banner, content, title, description, amount. Settings follow the naming guidelines: Variant in PascalCase, isLoading and isPressed as is-prefixed booleans. Discount's smaller, darker title is the multi-line label style, applied deliberately.

Composable

Pass

⤷ Icon is an empty slot, so DS icons drop straight in. Cards stack cleanly into a horizontal scroller and the skeleton is first-class.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	Variant=Default	Banner slot + title + 2-line description. 140 × 214.
With Icon	Yes	Yes	Variant=With Icon	Default layout plus a 34 × 34 `⤷ Icon` slot at the bottom-left of the banner. The slot ships empty on a `#005ce5` circle — drop any DS icon in.
Discount	Yes	Yes	Variant=Discount	Taller banner (140 × 152) over a white content block with title and `#amount`. 140 × 226.
Loading	Yes	Yes	isLoading=true	Banner and text become flat `#eef2f9` blocks. Built for Default (212) and Discount (211); With Icon reuses the Default skeleton, since a skeleton hides the icon anyway.
Pressed	Yes	Yes	isPressed=true	Title dims to `#445c85` and description to `#90a8d0`. The banner does not change.
Focused	N/A	N/A	Not built	Not needed — this card ships on touch surfaces only.

Issues

Code Connect mappings not registered. Blocked — the native component library doesn't exist yet. Nothing to action on the design side. C7 · Code Connect Linkability

The type setting no longer mixes content with loading state. v2.0: rebuilt on node 5655:42547 as three independent settings — Variant (Default / With Icon / Discount), isLoading, and isPressed. Picking a content version no longer forces a loading choice. C2 · Variant & Property Naming
The icon badge is a real slot. v2.0: ⤷ Icon (node 5655:42609) is a 34 × 34 slot, empty by design. Any DS icon or Avatar drops straight in without detaching. It replaces the drawn #c2c6cf circle. C6 · Asset & Icon Quality
The card has a pressed state. v2.0: isPressed dims the title to #445c85 and the description to #90a8d0. Focus was reviewed and dropped — this card ships on touch surfaces only. C5 · Interaction State Coverage
The spacing helper is out of the Discount card. v2.1: _space_12 removed from both Discount versions (5655:42551, 5670:43358). The content frame now runs #title straight into #amount, with the 12px gap carried by auto-layout spacing instead of a placed instance. C1 · Layer Structure & Naming
The loading version's layer names match the rest of the set. v2.2: both sender bars are now description (5663:43017, 5663:43018), Discount's loading bars are title and amount, and both loading versions capitalise Banner to match. The frame stays a plain frame rather than a slot, which is right for a skeleton — there is nothing to drop into a loading placeholder. C1 · Layer Structure & Naming
All eight versions name the content frame content. v2.2: standardised on content rather than block-content, matching the wider design system — content appears in 3,000+ instances against 23 for block-content. Default, With Icon, Discount, and both loading versions now agree. C1 · Layer Structure & Naming
Discount's title treatment is intentional. v2.2: reviewed and dismissed. The smaller 14 / 16 size is the multi-line label text style, and the darker #0a2757 is deliberate — on a discount card the #amount carries the main colour, so the title steps back. C3 · Token Coverage
The banner shadow is safe where it is. v2.2: reviewed and dismissed. Designers replace the image layer inside the Asset instance rather than the instance itself, so dimmer and shadow stay put as siblings and the icon keeps its contrast backing. C6 · Asset & Icon Quality
The banner placeholder is intentional. v2.0: reviewed and dismissed. Banner (node 5650:40680) is a slot, and the replace-this-asset image sits with its purple #e6e1ef dimmer inside the swappable Asset instance — real media replaces both at once. The matching recommendation to tokenise the dimmer was dropped for the same reason. C6 · Asset & Icon Quality

Types

Default

DES DEV

Banner image + title + 2-line description. The banner ships a placeholder PNG dimmed by a purple multiply layer — replace both with your real media.

Title

Description here.
Description here.

Properties

Type default

Aspect 3:2 hero image

Pagination dots

Colors

Heading #2340A9

Description #6780A9

Surface #FFFFFF

Active dot #005CE5

Inactive dot #EEF2F9

Layout

Card width 140px

Banner size 140 × 140px

Banner radius radius/radius-1 (4px)

Banner gap 12px

Title → desc gap 4px

Total height 215px

Typography

Title style Primary/Headlines/Block

Title font Proxima Soft Bold · 18 / 23 · +0.25

Description style Secondary/Bold/Caption

Description font BarkAda Semibold · 12 / 18 · 0

EBCarousel(items: cards) { card in
    EBCarouselCard(card)
}

Default — Colors

Promotional carousel card with heading, description, and pagination dots.

Role	Token	Default
Surface	bg/color-bg-main	#FFFFFF
Heading	carousel/color/label-header	#2340A9
Description	carousel/color/description	#6780A9
Active dot	bg/color-bg-primary	#005CE5
Inactive dot	bg/color-bg-strong	#EEF2F9

With icon

DES DEV

Default layout + a bottom-left icon badge on the banner. A gradient shadow along the lower third improves icon contrast against bright imagery.

Title

Description here.
Description here.

Properties

Type with-icon

Has icon Yes

Has description Yes

Colors

Surface bg #FFFFFF

Icon container bg #E8F1FF

Title #0A2757

Description #3C4A5C

Layout

Width 280px

Min height 160px

Padding 20px

Corner radius 16px

Icon container 48 × 48px

Icon size 24 × 24px

Gap 12px

Typography

Title style Heading/Small

Description style Body/Small

EBCarouselCard(
    title: "Send money",
    description: "Free transfers to GCash users",
    leadingIcon: Image(systemName: "paperplane.fill"))
)

With Icon — Colors

Icon-led carousel card with a tinted icon container and stacked title/description.

Role	Token	Default
Surface bg	main/card/bg	#FFFFFF
Icon container bg	main/card/icon/bg	#E8F1FF
Title	main/card/title	#0A2757
Description	main/card/description	#3C4A5C

Skeleton loader

DES DEV

Loading placeholder: banner becomes a flat light-gray block; title and description become bar placeholders. Card total height drops to 212 (vs 215 default) due to the 16 top gap in the content block.

Properties

Type skeleton

State Loading

Has content No

Colors

Skeleton bg #EEF2F9

Surface bg #FFFFFF

Layout

Width 280px

Min height 160px

Padding 20px

Corner radius 16px

Bar 1 size 120 × 12px

Bar 2 size 180 × 8px

Typography

— No text in skeleton state

EBCarouselCard(isLoading: true)

Skeleton — Colors

Loading state — content slots become rounded grey rectangles on the card surface.

Role	Token	Default
Skeleton bg	main/skeleton/bg	#EEF2F9
Surface bg	main/card/bg	#FFFFFF

Property Mapping

Figma Property	SwiftUI	Compose
`type: default \| with icon \| skeleton loader`	`variant: default \| with-icon` + `isLoading: Boolean`	`variant: EBCarouselCardVariant` + `isLoading: Bool`
(hardcoded raster)	`image: Frame` (slot)	`image: () -> Image`
(hardcoded text)	`title: String`	`title: String`
(hardcoded text)	`description: String`	`description: String?`
(hardcoded circle)	`icon?: Icon` (slot)	`icon: EBIcon?`
(hardcoded purple multiply)	`overlay?: Color` (token)	`overlay: Color?`
(not modeled)	`onTap?: () -> Void`	`onTap: (() -> Void)?`

Requirement	iOS	Android
Card as a button	Whole card wrapped in `Button` with combined `accessibilityLabel` (title + description).	`Modifier.clickable { onClick() }.semantics(mergeDescendants = true)` on the column.
Combined announcement	"Send Money, Locally or abroad, same day" — VoiceOver reads title then description.	Same reading order — TalkBack follows composition.
Image alt	If the banner carries meaning, pass `accessibilityLabel` on the image; otherwise mark as decorative.	`contentDescription` set when banner is content-bearing, `null` when decorative.
Min touch target	Card is 140×215 — comfortably above 44 pt ✓	140 dp × 215 dp — above 48 dp ✓
Loading state	Announce "Loading" once on mount; suppress per-placeholder announcements.	`contentDescription = "Loading"` on the skeleton container.
Focus ring	Add a `.focused()` modifier → 2 px outline for tvOS/iPad keyboard.	`Modifier.focusable()` + border in `border/focus` token.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	All eight versions share one anatomy — `Banner`, `content`, `title`, `description`, `amount`. Names are semantic and consistent.
C2	Variant & Property Naming	Ready	`Variant` in PascalCase; `isLoading` and `isPressed` as `is`-prefixed booleans. Follows the Property Naming Guidelines.
C3	Token Coverage	Needs Refinement	The one raw hex flagged in review — the `#e6e1ef` dimmer — is an optional decorative overlay on the asset, so it is deliberately unbound. The read-only review tooling can't see variable bindings, so the wider set is recorded as unverified rather than failing; the token audit recommendation stays open to close it out.
C4	Native Mappability	Ready	Maps to `VStack` / `Column` in a horizontal scroller. Slots map to `@ViewBuilder` / `@Composable` parameters.
C5	Interaction State Coverage	Ready	Default, pressed, and loading all built. Focus reviewed and dropped — this card ships on touch surfaces only.
C6	Asset & Icon Quality	Ready	`Banner`, `⤷ Icon`, and `⤷ Violator` are slots. The placeholder image is replaced inside the `Asset` instance, leaving `dimmer` and `shadow` in place.
C7	Code Connect Linkability	Not Mapped	Blocked — the native component library doesn't exist yet.

Variants Inventory (3 total)

type (3) = 3 variants. default and with icon share the same overall dimensions (140 × 215); skeleton loader is 140 × 212 due to a different content padding.

type	Node	Dimensions	Anatomy
default	`23:121312`	140 × 215	Banner + title + 2-line description.
with icon	`23:121322`	140 × 215	Default + gradient shadow + bottom-left 30×30 icon badge on banner.
skeleton loader	`23:121334`	140 × 212	Flat banner + 3 bar placeholders (title 16, desc 10, desc 10 @ 97w).

1.0.0 — April 2026Major

Initial Assessment · node 23:121311

Verdict: Restructure — Split type into variant + isLoading, adopt image + icon slots, drop the hardcoded purple dimmer, add pressed/focused states, and consolidate the 5-component Carousel family. Open

Schema

Skeleton pattern acknowledged — First-class skeleton variant is valuable; keep it when restructuring into EBCarouselCardSkeleton. Noted

Praise

Family consolidation — 5 Carousel components collapse to 2: Carousel Card (default / discount) and Carousel Item (peek). Open

Family

C2 — Type split — variant for content, isLoading for state. Open

C6 — Image + icon slots — Replace banner PNG and hardcoded icon circle with Figma Slots. Open

C5 — Pressed / focused — Tappable card needs both. Open

C7 — Code Connect — Blocked on above. Open