Carousel Item — GCash DS Assessment

KeepReady

A full-bleed banner item for a horizontal carousel — background image, heading, description, and a button. 24 versions across size, appearance, top element, and pressed state.

Keep — rebuilt as one component with a complete version grid

The three near-identical siblings (Item, Center, Side) collapsed into one Carousel Item, and every issue from the first assessment is closed. Settings are now Size, Appearance, TopElement, and isPressed — a full 2 × 2 × 3 × 2 grid with all 24 versions built, no gaps. Background and ⤷ LeadingIcon are real slots, the chevron is a vector instance inside a proper Button, and pressed ships as a dim overlay. Code Connect stays unmapped because the native library doesn't exist yet.

In Context

Carousel - Item is one card in a horizontal swipe carousel — typically a promotional banner stack on the Home or Dashboard screen. The center item is emphasized; side items peek in at reduced opacity/scale. In today's Figma file, those visual states exist as separate components (Item, Item - Center, Item - Side) rather than being driven by the carousel container.

Live Preview

Heading

This is a description for this banner.

Button

Content

preamble

heading

description

button

Properties

Size

Appearance

TopElement

isPressed

DS Health

Reusable

Pass

Background is a slot, so any team drops in its own artwork without detaching. One component now covers what took three.

Self-contained

Pass

Background, leading icon, and the button all arrive as slots or instances. Pressed is handled inside the component by an Overlay instance rather than left to the consumer.

Consistent

Pass

All 24 versions share one anatomy — Background, content, top-container, text-container, Button_New. Settings follow the naming guidelines: Size, Appearance, and TopElement in PascalCase, isPressed as an is-prefixed boolean with true / false values.

Composable

Pass

Composes the DS button rather than drawing its own, and the chevron rides in the button's Trailing Container slot. Stacks into a horizontal scroller; the carousel container itself is still undocumented and tracked as a recommendation.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	Size=Default	282 × 160. Background slot, heading, description, and a button with a trailing chevron.
Small	Yes	Yes	Size=Small	282 × 146. Same anatomy, 14px shorter. These are the two heights the old Center and Side components used, so a carousel that shrinks its side items swaps versions rather than applying a transform.
Dark appearance	Yes	Yes	Appearance=Dark	For dark artwork — heading in `#ffffff`, description in `#f6f9fd` at 80%.
Light appearance	Yes	Yes	Appearance=Light	For pale artwork — dark text. Note the inversion from the old `mode` setting: what was `mode=Light Text` is now `Appearance=Dark`.
Top element	Yes	Yes	TopElement=Icon \| Preamble \| None	Chooses what sits above the heading — a 24 × 24 `⤷ LeadingIcon` slot, a preamble line, or nothing.
Pressed	Yes	Yes	isPressed=true	An `Overlay` instance drops a `dim` layer over the background at `#020e22` / 24%. Text colours stay put.
Loading	N/A	N/A	Not built	No skeleton. Carousel Card ships one — deferred for now, tracked as a family-consistency item.

Issues

The heading and description can be set on a copy. Only the preamble was a real setting. The headline and body text were plain layers, so anyone placing the card had to detach it to change the words. Heading and Description are now settings. C2 · Variant & Property Naming
The preamble setting is named after its layer. It was called Text, which said nothing about what it fills. Renamed to Preamble, matching #preamble and the rest of the Carousel family. C2 · Variant & Property Naming
Every colour is a named colour. Both appearances carry their full token set, confirmed by design — including the surfaces, bg/color-bg-brand on Dark and bg/color-bg-info-weakest on Light. C3 moves to Ready. C3 · Token Coverage
The three sibling components are now one. v2.0: rebuilt on node 5776:37969. Item, Center, and Side collapsed into a single Carousel Item, and what was carousel position is now a Size setting — Default (282 × 160) and Small (282 × 146). C1 · Layer Structure & Naming
Property names follow the guidelines. v2.0: Size, Appearance, and TopElement are PascalCase variant properties; isPressed is an is-prefixed boolean with lowercase true / false; the slot is ⤷ LeadingIcon. The old mix of hasPreamble, with Icon, and Light Text is gone. C2 · Variant & Property Naming
type=Headline Only is gone. v2.0: replaced by TopElement = Icon | Preamble | None, which names what actually changes — the element above the heading. C2 · Variant & Property Naming
mode became a real appearance setting. v2.0: now Appearance = Dark | Light, picking the whole text colour set at once instead of overriding layers. Watch the inversion — the old mode=Light Text is the new Appearance=Dark. C4 · Native Mappability
The background is a slot. v2.0: Background is a SLOT on all 24 versions, wrapping an Asset instance. Teams drop in their own artwork without detaching. C4 · Native Mappability
The chevron is a vector instance. v2.0: now Chevron Right Small, riding in the button's Trailing Container slot. The raster shape_full is gone, and it ships once rather than once per appearance. C6 · Asset & Icon Quality
The icon placeholder is a slot. v2.0: ⤷ LeadingIcon (5804:42380) is an empty 24 × 24 slot in place of the drawn grey circle. Any DS icon or Avatar drops in. C6 · Asset & Icon Quality
The card has a pressed state. v2.0: isPressed ships on all 24 versions. An Overlay instance dims the background with a #020e22 layer at 24%, leaving text colours untouched. C5 · Interaction State Coverage

Variants

Dark

Heading

This is a description for this banner.

Button

Properties

Size

isPressed

TopElement

Preamble

Heading

hasDescription

Description

hasTextLink

Properties

Appearance Dark

Size Default

isPressed false

TopElement Icon

Preamble Preamble

Heading Heading

hasDescription true

Description This is a description for this banner.

hasTextLink true

⤷ LeadingIcon empty slot · 24 × 24

Background Asset placeholder

Colors

Surface #1972F9

#preamble #F6F9FD · 80%

#heading #FFFFFF

#description #F6F9FD · 80%

Text link label #FFFFFF

Text link icon #FFFFFF

Pressed overlay #020E22 · 24%

Typography

#preamble Primary/Label/Fine

#heading Primary/Headlines/Block

#description Secondary/Bold/Caption

Text link label Primary/Label/Small

Layout

Height 160px

Width 282px

Radius 8px

Padding H 20px (derived)

Padding V 20px (derived)

Gap 0px (derived)

Alignment Leading (derived)

EBCarouselItem(
    appearance: .dark,
    heading: "Heading",
    description: "This is a description for this banner.",
    textLink: "Button",
    leadingIcon: Image(systemName: "star.fill")
) {
    Image(banner.asset)
}

Dark — Colors

Appearance=Dark is a dark surface with light text — the old mode=Light Text. Pressed reuses these colours and adds a dim layer over the whole card.

Role	Token	Value
Surface	bg/color-bg-brand	#1972F9
#preamble	text/color-text-inverse-weak	#F6F9FD · 80%
#heading	text/color-text-inverse	#FFFFFF
#description	text/color-text-inverse-weak	#F6F9FD · 80%
Text link label	text/color-text-inverse	#FFFFFF
Text link icon	border/color-border-primary-inverse	#FFFFFF
Pressed overlay	— dim layer added by isPressed	#020E22 · 24%

Light

Heading

This is a description for this banner.

Button

Properties

Size

isPressed

TopElement

Preamble

Heading

hasDescription

Description

hasTextLink

Properties

Appearance Light

Size Default

isPressed false

TopElement Icon

Preamble Preamble

Heading Heading

hasDescription true

Description This is a description for this banner.

hasTextLink true

⤷ LeadingIcon empty slot · 24 × 24

Background Asset placeholder

Colors

Surface #E5F1FF

#preamble #072592 · 60%

#heading #0A2757

#description #6780A9

Text link label #005CE5

Text link icon #005CE5

Pressed overlay #020E22 · 24%

Typography

#preamble Primary/Label/Fine

#heading Primary/Headlines/Block

#description Secondary/Bold/Caption

Text link label Primary/Label/Small

Layout

Height 160px

Width 282px

Radius 8px

Padding H 20px (derived)

Padding V 20px (derived)

Gap 0px (derived)

Alignment Leading (derived)

EBCarouselItem(
    appearance: .light,
    heading: "Heading",
    description: "This is a description for this banner.",
    textLink: "Button",
    leadingIcon: Image(systemName: "star.fill")
) {
    Image(banner.asset)
}

Light — Colors

Appearance=Light is a pale surface with dark text — the old mode=Dark Text. Same pressed behaviour.

Role	Token	Value
Surface	bg/color-bg-info-weakest	#E5F1FF
#preamble	text/color-text-strong	#072592 · 60%
#heading	text/color-text	#0A2757
#description	text/color-text-weaker	#6780A9
Text link label	text/color-text-primary	#005CE5
Text link icon	border/color-border-primary	#005CE5
Pressed overlay	— dim layer added by isPressed	#020E22 · 24%

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. Note Appearance names the surface, not the text — Dark is a dark card with light copy.

Figma Property	SwiftUI	Compose
Size — Default, Small	`size: EBCarouselItemSize = .default`	`size: EBCarouselItemSize = Default`
isPressed — true, false	`isPressed: Bool = false` — driven by the press gesture	`isPressed: Boolean = false` — driven by the press gesture
Appearance — Dark, Light	`appearance: EBAppearance` — `.dark` is a dark surface with light text	`appearance: EBAppearance` — `Dark` is a dark surface with light text
TopElement — Icon, Preamble, None	`topElement: EBCarouselItemTop = .icon`	`topElement: EBCarouselItemTop = Icon`
⤷ LeadingIcon (slot) — shown when TopElement is Icon	`@ViewBuilder leadingIcon: (() -> Icon)?`	`leadingIcon: (@Composable () -> Unit)? = null`
Preamble (text) — shown when TopElement is Preamble	`preamble: String?`	`preamble: String? = null`
Heading (text)	`heading: String`	`heading: String`
hasDescription — true, false	`description: String?` — nil hides it	`description: String? = null`
Description (text)	`description: String?`	`description: String? = null`
Background (slot)	`@ViewBuilder background: () -> Background`	`background: @Composable BoxScope.() -> Unit`
hasTextLink — true, false	`textLink: String?` — nil hides the button	`textLink: String? = null`

Usage Snippets Planned API

Dark — light copy on a dark surface

EBCarouselItem(
    appearance: .dark,
    heading: "Heading",
    description: "This is a description for this banner.",
    textLink: "Button",
    leadingIcon: Image(systemName: "star.fill")
) {
    Image(banner.asset)
}

EBCarouselItem(
    appearance = EBAppearance.Dark,
    heading = "Heading",
    description = "This is a description for this banner.",
    textLink = "Button",
    leadingIcon = { Icon(Icons.Filled.Star, null) }
) {
    AsyncImage(model = banner.asset, contentDescription = null)
}

Light — dark copy on a pale surface

EBCarouselItem(
    appearance: .light,
    heading: "Heading",
    description: "This is a description for this banner.",
    textLink: "Button",
    leadingIcon: Image(systemName: "star.fill")
) {
    Image(banner.asset)
}

EBCarouselItem(
    appearance = EBAppearance.Light,
    heading = "Heading",
    description = "This is a description for this banner.",
    textLink = "Button",
    leadingIcon = { Icon(Icons.Filled.Star, null) }
) {
    AsyncImage(model = banner.asset, contentDescription = null)
}

Requirement	iOS	Android
Whole-card tap target	Wrap in `Button` with combined `accessibilityLabel` (preamble + heading + description + action).	`Modifier.clickable().semantics(mergeDescendants = true)`.
Page-change announcements	Announce current page index via `accessibilityValue` on the carousel container.	`semantics { contentDescription = "Banner 2 of 5" }` on the pager.
Contrast on image	Designer ensures 4.5:1 between text + underlying image area; optional scrim overlay.	Same — ensure WCAG AA against the image region.
Reduce motion	Skip scale + opacity transitions when `UIAccessibility.isReduceMotionEnabled`.	Check `Settings.Global.TRANSITION_ANIMATION_SCALE`; skip `graphicsLayer` animation.
Min touch target	282×160 ≫ 44 pt ✓	282×160 ≫ 48 dp ✓

Usage Guidelines

Do

Pick <code>Appearance</code> by the surface you want, not the text. <code>Dark</code> is a dark card with light copy.

Don't

Don't map it from the old <code>mode</code> setting by memory. <code>mode=Light Text</code> is <code>Appearance=Dark</code> — the two are named for opposite things.

Do

Drop artwork into the <code>Background</code> slot from the product's own asset pipeline.

Don't

Don't bake artwork into the component. The slot is why one card serves every campaign.

Do

Check the copy against the artwork you ship. The card tints the surface, not the image.

Don't

Don't rely on the appearance alone for contrast — a busy photo can leave white text unreadable even on <code>Dark</code>.

Do

Use <code>Small</code> where the rail is tight; it keeps the same width and trims the description.

Don't

Don't reach for it to fit longer copy. It gives the description less room, not more.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	One component replaces three. All 24 versions share `Background`, `content`, `top-container`, `text-container`.
C2	Variant & Property Naming	Ready	`Size`, `Appearance`, `TopElement` in PascalCase; `isPressed` boolean with lowercase values. `Size=Default\|Small` is a deliberate exception to the `XS–XL` scale.
C3	Token Coverage	Ready	Every colour is bound and confirmed by design. Dark sits on `bg/color-bg-brand`, Light on `bg/color-bg-info-weakest`, with the text roles on `text/color-text-*` and the link icon on `border/color-border-primary`.
C4	Native Mappability	Ready	`Background` and `⤷ LeadingIcon` map to `@ViewBuilder` / `@Composable` slots. `Size` and `Appearance` are plain enums.
C5	Interaction State Coverage	Ready	Default and pressed built across all 24. No loading state — deferred, tracked as a family-consistency item.
C6	Asset & Icon Quality	Ready	Vector `Chevron Right Small` instance; `⤷ LeadingIcon` slot; `Background` slot.

Variants Inventory (24 total)

2 Size × 2 isPressed × 2 Appearance × 3 TopElement = 24 versions, all built — a complete grid with no gaps.

Appearance	Versions	Count
Dark	2 Size × 3 TopElement × 2 isPressed	12
Light	2 Size × 3 TopElement × 2 isPressed	12

View full Appearance × Size × TopElement breakdown (24 rows)

Appearance	Size	TopElement	isPressed	Node
Dark	Default	Icon	false	5804:39914
Dark	Default	Icon	true	5821:44302
Dark	Default	Preamble	false	5804:42210
Dark	Default	Preamble	true	5821:44312
Dark	Default	None	false	5821:44670
Dark	Default	None	true	5821:44814
Dark	Small	Icon	false	5804:42531
Dark	Small	Icon	true	5821:43953
Dark	Small	Preamble	false	5804:42540
Dark	Small	Preamble	true	5821:43973
Dark	Small	None	false	5821:44680
Dark	Small	None	true	5821:44825
Light	Default	Icon	false	5804:41501
Light	Default	Icon	true	5821:43983
Light	Default	Preamble	false	5804:42291
Light	Default	Preamble	true	5821:44003
Light	Default	None	false	5821:44690
Light	Default	None	true	5821:44836
Light	Small	Icon	false	5804:42549
Light	Small	Icon	true	5821:43993
Light	Small	Preamble	false	5804:42558
Light	Small	Preamble	true	5821:44013
Light	Small	None	false	5821:44700
Light	Small	None	true	5821:44847

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.carouselitem.*. 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, Style and Code tabs rebuilt — node 5776:37969

The heading and description can be set on a copy. Only the preamble was a real setting, so anyone placing the card had to detach it to change the headline or body. Heading and Description are now settings. This is what makes the release a minor rather than a patch.

C2 Resolved

The preamble setting is named after its layer. It was called Text, which said nothing about what it fills. Renamed to Preamble, matching #preamble and the rest of the Carousel family.

C2 Resolved

The Style tab was documenting retired settings. Its two cards were "Default · Light Text · hasTextLink=yes" and "Headline Only · has Preamble · has TextLink" — three properties crammed into each title, and both leaning on the old mode and type vocabulary. They are now Dark and Light, the two values of the driving Appearance setting.

Docs

The appearance inversion is written down. Appearance names the surface where mode named the text, so the old mode=Light Text is the new Appearance=Dark. Both colour tables and the Property Mapping now say so, because reading it from memory gets it backwards.

Docs

Type styles are read from the component. Typography carries four style names — Primary/Label/Fine, Primary/Headlines/Block, Secondary/Bold/Caption, Primary/Label/Small — each resolved through the style database rather than written by hand. Both Size values were read; Small trims the description box but keeps the same styles.

C3 Resolved

Every colour is a named colour, confirmed by design. Both appearances now carry their full token set, including the surfaces — bg/color-bg-brand on Dark and bg/color-bg-info-weakest on Light.

C3 Resolved

The preview was drawing a component that does not exist. It showed a two-tone card with a grey image well and a peach gradient; the component is one flat colour edge to edge. Corrected against nodes 8942:79573 and 8942:79589.

Docs

Pressed was dimming the text. The preview stacked the dim above the copy. In Figma the Background and Overlay are positioned beneath content, so a press dims the artwork only.

Docs

Text controls hide when their layer is not on screen. The preamble field only applies at TopElement=Preamble and the description field only when hasDescription is on. Both now appear and disappear with those settings.

Docs

The Code tab described the component before the rebuild. Property Mapping carried eight rows built on mode, type and hasPreamble, with the background, icon and chevron all listed as baked in. It now maps all eleven settings. Installation, Usage Snippets and Usage Guidelines were empty and are written.

Docs

The version count was wrong in two directions at once. The inventory read 10 while its own description claimed 24, using a multiplier built from settings that no longer exist. It now reads 24 — the real grid, with a summary and a full breakdown.

C2 Resolved

2.0.0 — August 2026Major

Rebuilt in the 2026 Working File — node 18543:2806 → 5776:37969

Rebuilt on a new node. The component moved from 18543:2806 to 5776:37969. The assessment was repointed at the time; this entry records the move itself, which had gone unwritten.

Family

Three components became one. Carousel - Item, Carousel Item - Center and Carousel Item - Side all shipped the same schema and differed only in height. They collapsed into a single Carousel Item, and what had been carousel position became a Size setting — Default (282 × 160) and Small (282 × 146).

C1 Resolved

Settings now follow the naming guidelines. The old mix of hasPreamble, with Icon and Light Text is gone. Size, Appearance and TopElement are PascalCase, isPressed is an is-prefixed boolean with lowercase true / false, and the slot reads ⤷ LeadingIcon.

C2 Resolved

A misleading setting was replaced. type=Headline Only actually rendered a preamble, a heading and a button. It became TopElement = Icon | Preamble | None, which names what really changes — the element above the heading.

C2 Resolved

Text colour became a real appearance setting. mode only swapped layer colours. It is now Appearance = Dark | Light, picking the whole set at once. Note the inversion when reading old files: the former mode=Light Text is the new Appearance=Dark.

C4 Resolved

The background became a swappable area. The artwork had been baked into every version, so any team wanting its own image had to detach. Background is a Figma Slot on all 24 versions.

C4 Resolved

The chevron is a vector again. It had shipped as a raster shape_full, once per appearance. It is now a Chevron Right Small instance riding in the DS button's Trailing Container slot — one copy, crisp at any size.

C6 Resolved

The icon placeholder became a slot. A drawn grey circle stood in for the leading icon. ⤷ LeadingIcon is now an empty 24 × 24 slot, so any DS icon or Avatar drops straight in.

C6 Resolved

The card gained a pressed state. A tappable banner had no way to show it was being pressed. isPressed now dims the card with an Overlay instance at #020E22 / 24%, leaving text colours untouched.

C5 Resolved

The version grid is complete. Size × isPressed × Appearance × TopElement gives 24 versions with no gaps, against 10 before. Size=Default|Small is a deliberate exception to the XS–XL scale, kept to put the emphasis on default behaviour.

C2 Resolved

1.0.0 — April 2026Major

Initial Assessment · node 18543:2806

Verdict: Consolidate — Merge with Carousel Item - Center + Side; replace raster bg/chevron with slots/vectors; add pressed; rename Type enum. Open

Family

C1 — Position-as-variant — Center/Side are separate components with identical schemas. Should be one component + container-driven styling. Open

C2 — Property names — Mixed casing (hasPreamble vs with Icon); Headline Only mis-named. Open

C4 — Background slot + mode rename — Background is baked raster; mode should be appearance. Open

C5 — Pressed state — Tappable card lacks pressed feedback. Open

C6 — Raster chevron + drawn icon — Vectorize chevron; swap icon placeholder for a slot. Open

C7 — Code Connect — Blocked on consolidation + slots. Open