Carousel Card — GCash DS Assessment

KeepReady

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 `bg/color-bg-primary` circle — drop any DS icon in.
Discount	Yes	Yes	Variant=Discount	Taller banner (140 × 152) over a white content block with title and `#amount`. The card hugs its content — 140 × 212 with the placeholder copy.
Loading	Yes	Yes	isLoading=true	Banner and text become flat `#eef2f9` blocks. Each loading version is the same height as the card it replaces — Default 214, Discount 212 — so nothing jumps when the content arrives. 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

The Discount card sizes to its own text now. Its height was pinned to a fixed number, so a longer title overflowed instead of pushing the card taller. It hugs its content now — 212 tall with the placeholder copy, more when the title runs to two lines. C4 · Native Mappability
The loading card is the same height as the real one. The skeletons were 212 and 211 where the loaded cards were 214 and 212, so the layout shifted the moment content arrived. Both now match the card they stand in for. C4 · Native Mappability
The invisible white backgrounds are gone. Every version carried a white fill switched off — nothing drew it, but it read as a surface to anyone inspecting the layers. All eight are clean. C1 · Layer Structure & Naming
The title and description can be set on a copy. Only the price was a real setting. The heading and body text were plain layers, so anyone placing the card had to detach it to change the words. Title and Description are now settings, matching Amount. C2 · Variant & Property Naming
The banner dimmer is a plain colour on purpose. It is the one value not tied to a named colour. That is deliberate — the overlay is tuned per asset so the badge and text above it stay readable on any image. Not a gap. C3 · Token Coverage
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

Title

Description here.
Description here.

Properties

isLoading

isPressed

hasViolator

Title

Description

Properties

Variant Default

isLoading false

isPressed false

hasViolator true

Title Title

Description Description here. Description here.

Banner Asset placeholder

⤷ Violator Badge · New

Colors

#title #2340A9

#description #6780A9

Violator label #FFFFFF

Violator background #1972F9

Banner dimmer #E6E1EF · 40% · Multiply

Typography

#title Primary/Headlines/Block

#description Secondary/Bold/Caption

Layout

Height Hug · 214px at the shipped placeholder

Width 140px

Padding H 0px (derived)

Padding V 0px (derived)

Gap 12px (derived)

Alignment Leading (derived)

EBCarouselCard(
    variant: .default,
    title: "Title",
    description: "Description here. Description here.",
    violator: "New"
) {
    Image(ad.banner)
}

Default — Colors

The card paints no surface of its own. Both text roles shift one step weaker when isPressed=true.

Role	Token	Default	Pressed	Disabled
#title	text/color-text-strong · pressed text/color-text-weak	#2340A9	#445C85	–
#description	text/color-text-weaker · pressed text/color-text-weakest	#6780A9	#90A8D0	–
Violator label	text/color-text-inverse	#FFFFFF	#FFFFFF	–
Violator background	bg/brand-bg-primary	#1972F9	#1972F9	–
Banner dimmer	— plain colour by design	#E6E1EF · 40% · Multiply	#E6E1EF · 40% · Multiply	–

With Icon

Title

Description here.
Description here.

Properties

isLoading

isPressed

hasViolator

Title

Description

Properties

Variant With Icon

isLoading false

isPressed false

hasViolator true

Title Title

Description Description here. Description here.

Banner Asset placeholder

⤷ Violator Badge · New

⤷ Icon empty slot · 34 × 34

Colors

#title #2340A9

#description #6780A9

⤷ Icon fill #005CE5

Violator label #FFFFFF

Violator background #1972F9

Banner dimmer #E6E1EF · 40% · Multiply

Typography

#title Primary/Headlines/Block

#description Secondary/Bold/Caption

Layout

Height Hug · 214px at the shipped placeholder

Width 140px

Padding H 0px (derived)

Padding V 0px (derived)

Gap 12px (derived)

Alignment Leading (derived)

EBCarouselCard(
    variant: .withIcon,
    title: "Title",
    description: "Description here. Description here.",
    violator: "New",
    icon: Image(systemName: "star.fill")
) {
    Image(ad.banner)
}

With Icon — Colors

Same palette as Default, plus the circular ⤷ Icon slot behind whichever DS icon is dropped in.

Role	Token	Default	Pressed	Disabled
#title	text/color-text-strong · pressed text/color-text-weak	#2340A9	#445C85	–
#description	text/color-text-weaker · pressed text/color-text-weakest	#6780A9	#90A8D0	–
⤷ Icon fill	bg/color-bg-primary	#005CE5	#005CE5	–
Violator label	text/color-text-inverse	#FFFFFF	#FFFFFF	–
Violator background	bg/brand-bg-primary	#1972F9	#1972F9	–
Banner dimmer	— plain colour by design	#E6E1EF · 40% · Multiply	#E6E1EF · 40% · Multiply	–

Discount

Label here
Label here

PHP 200.00

Properties

isLoading

isPressed

hasViolator

Title

Amount

Properties

Variant Discount

isLoading false

isPressed false

hasViolator true

Title Label here / Label here

Amount PHP 200.00

Banner Asset placeholder

⤷ Violator Badge · New

Colors

Surface #FFFFFF

#title #0A2757

#amount #2340A9

Violator label #FFFFFF

Violator background #1972F9

Banner dimmer #E6E1EF · 40% · Multiply

Typography

#title Primary/Multi-line Label/Small

#amount Primary/Label/Fine

Layout

Height Hug · 212px at the shipped placeholder

Width 140px

Padding H 0px (derived)

Padding V 0px (derived)

Gap 0px (derived)

Alignment Leading (derived)

EBCarouselCard(
    variant: .discount,
    title: "Label here",
    amount: "PHP 200.00",
    violator: "New"
) {
    Image(ad.banner)
}

Discount — Colors

Discount carries a real white content surface so it can sit on non-white backgrounds. Its title uses a darker token than the other two versions, and is deliberately smaller so a two-line label fits.

Role	Token	Default	Pressed	Disabled
Surface	bg/color-bg-main	#FFFFFF	#FFFFFF	–
#title	text/color-text · pressed text/color-text-weak	#0A2757	#445C85	–
#amount	text/color-text-strong · pressed text/color-text-weakest	#2340A9	#90A8D0	–
Violator label	text/color-text-inverse	#FFFFFF	#FFFFFF	–
Violator background	bg/brand-bg-primary	#1972F9	#1972F9	–
Banner dimmer	— plain colour by design	#E6E1EF · 40% · Multiply	#E6E1EF · 40% · Multiply	–

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:carousel:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.carousel.*

Planned API — the native library does not exist yet. Snippets show the intended shape, not shipped code.

Property Mapping

Figma properties mapped to the intended native parameters, in the order the Figma property panel lists them.

Figma Property	SwiftUI	Compose
Variant — Default, With Icon, Discount	`variant: EBCarouselCardVariant`	`variant = EBCarouselCardVariant.Default / WithIcon / Discount`
isLoading — true, false	`isLoading: Bool = false`	`isLoading: Boolean = false`
isPressed — true, false	`isPressed: Bool = false` — driven by the press gesture	`isPressed: Boolean = false` — driven by the press gesture
hasViolator — true, false	`showViolator: Bool = true`	`showViolator: Boolean = true`
⤷ Violator (slot)	`@ViewBuilder violator: () -> Violator`	`violator: @Composable () -> Unit`
⤷ Icon (slot) — With Icon only	`@ViewBuilder icon: (() -> Icon)?`	`icon: (@Composable () -> Unit)? = null`
Banner (slot)	`@ViewBuilder banner: () -> Banner`	`banner: @Composable BoxScope.() -> Unit`
Title (text)	`title: String`	`title: String`
Description (text) — Default, With Icon	`description: String?`	`description: String? = null`
Amount (text) — Discount	`amount: String?`	`amount: String? = null`

Usage Snippets Planned API

Default — banner, title, description

EBCarouselCard(
    variant: .default,
    title: "Title",
    description: "Description here. Description here.",
    violator: "New"
) {
    Image(ad.banner)
}

EBCarouselCard(
    variant = EBCarouselCardVariant.Default,
    title = "Title",
    description = "Description here. Description here.",
    violator = "New"
) {
    AsyncImage(model = ad.banner, contentDescription = null)
}

With Icon — adds the icon slot on the banner

EBCarouselCard(
    variant: .withIcon,
    title: "Title",
    description: "Description here. Description here.",
    violator: "New",
    icon: Image(systemName: "star.fill")
) {
    Image(ad.banner)
}

EBCarouselCard(
    variant = EBCarouselCardVariant.WithIcon,
    title = "Title",
    description = "Description here. Description here.",
    violator = "New",
    icon = { Icon(Icons.Filled.Star, null) }
) {
    AsyncImage(model = ad.banner, contentDescription = null)
}

Discount — title and price, no description

EBCarouselCard(
    variant: .discount,
    title: "Label here",
    amount: "PHP 200.00",
    violator: "New"
) {
    Image(ad.banner)
}

EBCarouselCard(
    variant = EBCarouselCardVariant.Discount,
    title = "Label here",
    amount = "PHP 200.00",
    violator = "New"
) {
    AsyncImage(model = ad.banner, contentDescription = null)
}

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×214 — comfortably above 44 pt ✓	140 dp × 214 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.

Usage Guidelines

Do

Use <code>Discount</code> when the price is the point — a voucher, a deal, a promo tile.

Don't

Don't use it for editorial cards. Its title is smaller so two lines of label fit, which makes headlines read as body text.

Do

Put campaign artwork in the <code>Banner</code> slot from the product's own asset pipeline.

Don't

Don't add campaign images to the design system library — the slot exists so they never have to be.

Do

Let the card size to its own text. Title and description both wrap.

Don't

Don't pin a height. All three versions hug their content, and a fixed height clips a longer title.

Do

Turn <code>hasViolator</code> off when there is nothing to flag.

Don't

Don't repurpose the violator for a price or a discount — that is what <code>Amount</code> is for.

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	Ready	Every colour is bound and confirmed by design: text roles on `text/color-text-*`, the icon circle on `bg/color-bg-primary`, the violator on `bg/brand-bg-primary`, Discount's surface on `bg/color-bg-main`. The `#e6e1ef` banner dimmer is a plain colour on purpose — it is tuned per asset so the badge and text above it stay readable.
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.

Variants Inventory (8 total)

3 Variant × 2 isLoading × 2 isPressed = 12 combinations, of which 8 are built. With Icon has no loading version — a skeleton hides the icon, so it reuses Default's. The three loading-and-pressed pairings cannot occur.

Variant	isLoading	isPressed	Height	Node
Default	false	false	214	5653:42029
With Icon	false	false	214	5655:42597
Discount	false	false	212	5655:42551
Default	false	true	214	5670:43340
With Icon	false	true	214	5670:43348
Discount	false	true	212	5670:43358
Default	true	false	214	5663:43019
Discount	true	false	212	5663:43020

2.1.1 — September 2026Patch

Kotlin import corrected to the family package

The Kotlin import named the component, not its family. It read com.eastblue.ds.carouselcard.*. Under the packaging rule settled on 2 September the package is the family — Carousel — so it is com.eastblue.ds.carousel.*. One package per family keeps imports stable when a family gains a component. The Gradle artifact keeps the slug and is unchanged.

Docs

2.1.0 — September 2026Minor

Text settings added, all three tabs rebuilt — node 5655:42547

The title and description can be set on a copy. Only the price was a real setting, so anyone placing the card had to detach it to change the words. Title and Description are now settings alongside Amount. This is what makes the release a minor rather than a patch.

C2 Resolved

The Discount card sizes to its own text. Its height was pinned to a fixed number, so a longer title overflowed instead of pushing the card taller. It hugs its content now.

C4 Resolved

The loading card is the same height as the real one. The skeletons were 212 and 211 where the loaded cards were 214 and 212, so the layout shifted the moment content arrived. Both now match the card they stand in for.

C4 Resolved

The invisible white backgrounds are gone. Every version carried a white fill switched off. Nothing drew it, but it read as a surface to anyone inspecting the layers.

C1 Resolved

The banner dimmer is a plain colour on purpose. It is the one value not tied to a named colour, and that is deliberate — the overlay is tuned per asset so the badge and text above it stay readable. Recorded as a decision, not a gap.

C3 Resolved

Every colour is now a named colour, confirmed by design. Text roles bind to text/color-text-strong, -weaker, -weak and -weakest; Discount sits on bg/color-bg-main; the icon circle is bg/color-bg-primary; the violator is text/color-text-inverse on bg/brand-bg-primary. The colour-token audit recommendation is applied and C3 moves to Ready.

C3 Resolved

The Style tab was documenting the wrong versions. Its three cards were Default, With icon and Skeleton loader — but Skeleton is isLoading, a setting, not a version, and it displaced Discount, which had no card at all. The cards are now the three real versions, on the real nodes; the old 23:1213xx ids exist nowhere in the set.

Docs

Type styles are read from the component, not written by hand. Typography rows now carry text style names only, each resolved from the component through the style database. Heading/Small and Body/Small, previously documented, are not design system styles at all.

Docs

Heights read as Hug. All three versions size to their content, and a fixed number went stale three times during this review alone. Layout also drops to the canonical keys — the old rows quoted a 280px card that was never this component.

Docs

The Code tab described a component that no longer existed. Property Mapping carried seven rows built on the retired type setting, with the banner and text listed as hardcoded. It now maps all ten settings. Installation, Usage Snippets and Usage Guidelines were empty and are written; the variant count was 3 and is 8.

Docs

One call, written three ways. The spec card, the Code tab and the live snippet each showed a different argument list, and only one passed the required Banner slot. All three now render the same canonical call.

Docs

2.0.0 — August 2026Major

Rebuilt in the 2026 Working File — node 23:121311 → 5655:42547

Rebuilt on a new node. The component moved from 23:121311 to 5655:42547. The assessment was repointed at the time; this entry records the move itself, which had gone unwritten.

Family

Discount Card was merged in. Carousel - Discount Card became a Variant value rather than its own component, taking the Carousel family from five components to three.

Family

One setting became three. type mixed content shape with loading state. It split into Variant (Default / With Icon / Discount), isLoading and isPressed — three independent settings, and the matrix went from 3 versions to 8.

C2 Resolved

The banner and icon badge became real swappable areas. Both had been baked in. They are now Figma Slots, so product teams drop in their own media and icons without detaching.

C6 Resolved

The card gained a pressed state. Previously there was no way to show the card being tapped.

C5 Resolved

The spacing helper came out of the Discount card. A _space_12 instance was faking a gap. Auto-layout spacing does the job and has a native equivalent.

C1 Resolved

The loading version stopped using leftover layer names. It kept names from before the rebuild while the rest of the set had moved on.

C1 Resolved

All eight versions name the content frame the same thing. It was called different things in different versions; every one now reads content.

C1 Resolved

Discount's smaller title is intentional. It is deliberately a step down from the other two versions so a two-line label fits. Closed as by design, not a gap.

C3 Resolved

The banner shadow is where it belongs. It sits inside the swappable asset rather than on the card, so replacing the media replaces the shadow with it.

C6 Resolved

The banner placeholder is intentional. The purple dimmed image ships as an authoring aid and is replaced when real media is dropped in.

C6 Resolved

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