FixNeeds Refinement
List Item Component link

A single row in a list: leading asset + body text. 3 variants by level (1, 2, 3) that control indent (0 / 16 / 32 px). Composes a List Item Asset instance for the leading marker.

Adopt Figma Slots for the asset
The leading asset is today an instance-swap placeholder. Declare a named asset Slot so consumers can drop in any List Item Asset variant (or a custom 16 × 16 component) directly. Maps 1 : 1 to @ViewBuilder / @Composable slots for Code Connect. Also rename level to an integer or drop it in favor of nesting-based indent.
In Context

Contexts are illustrative. Final screens will reference actual GCash patterns. List Items compose into multi-line lists on terms pages, onboarding steps, and task checklists.

Terms
Live Preview
List body with level-1 style
Properties
level
asset
DS Health
Reusable
Pass
Used in terms, onboarding, checklists, step indicators. Handles 3 levels of nesting via indent.
Self-contained
Pass
Carries gap, indent, and typography bindings. Body text uses Secondary/Bold/Base (BarkAda Semibold 14/20).
Consistent
Warn
level uses string values ("1"/"2"/"3") instead of integers. Figma won't let you parameterize it either — each level is a separate variant. C2
Composable
Warn
Leading asset uses instance-swap (default is a gray placeholder circle). Moving to a Figma Slot gives a cleaner composition surface and a direct slot mapping for Code Connect. C6
Open Issues
  • level property uses string values. Should be an integer, or — ideally — dropped in favor of indent inferred from nesting depth inside the List container. C2 · Variant & Property Naming
  • Leading asset is an instance-swap placeholder. Adopt Figma Slots so the asset becomes a first-class slot mapping to @ViewBuilder (SwiftUI) / @Composable (Compose) via Code Connect. C6 · Asset & Icon Quality
  • Code Connect mappings not registered. Blocked until level rename and the asset-slot adoption land. C7 · Code Connect Linkability
Design Recommendations
  • Adopt a Figma Slot for the asset — declare a named asset slot that accepts any List Item Asset instance (or a bare 16 × 16 component). Native maps to @ViewBuilder (SwiftUI) / @Composable slot (Compose) — Code Connect reads it as a real slot parameter. Slot
  • Rename or drop level — if keeping the prop, change string values to integers. Better: drop the variant entirely and let indent come from nesting depth inside the List container. Rename
  • Consider a Trailing slot — product patterns often pair list items with trailing counters, badges, or chevrons. Adding a trailing slot future-proofs the component without creating variant explosion. Slot
Styles
Level 1 — no indent
DES DEV

Base row. Asset + 270px body. No indent.

Properties
Level
Asset
Properties
Level 1
Asset bullet
Layout icon-leading + label-right
Colors
Icon #90A8D0
Description #445C85
Surface #FFFFFF
Layout
Row height 48 / 56px
Indent 0px
Padding H 16px
Padding V 12px
Icon size 24 × 24
Typography
Description style Secondary/Bold/Base
Description font BarkAda Semibold · 14 / 20
Colors by State
Role Token Value
Body text main/list-item/color/default/description #445C85
Level 2 — 16px indent
DES DEV

Indented 16px. Body fills remaining width of the 294px container.

Properties
Level
Asset
Properties
Level 2
Asset bullet
Layout icon-leading + label-right
Colors
Icon #90A8D0
Description #445C85
Surface #FFFFFF
Layout
Row height 48 / 56px
Indent 0px
Padding H 16px
Padding V 12px
Icon size 24 × 24
Typography
Description style Secondary/Bold/Base
Description font BarkAda Semibold · 14 / 20
Layout
Role Token Value
Asset → body gap space/space-8 8px
Level 2 indent space/space-16 16px
Level 3 indent space/space-32 32px
Level 1 body width — 270px
Levels 2 + 3 container width — 294px
Body alignment — items-start (asset top-aligned)
Level 3 — 32px indent
DES DEV

Indented 32px. Deepest supported level.

Properties
Level
Asset
Properties
Level 3
Asset bullet
Layout icon-leading + label-right
Colors
Icon #90A8D0
Description #445C85
Surface #FFFFFF
Layout
Row height 48 / 56px
Indent 0px
Padding H 16px
Padding V 12px
Icon size 24 × 24
Typography
Description style Secondary/Bold/Base
Description font BarkAda Semibold · 14 / 20
Typography
Role Token Spec
Body Secondary/Bold/Base BarkAda Semibold · 14 / 20
Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:list:1.0.0")
}
Property Mapping
Figma PropertySwiftUICompose
asset (Slot) @ViewBuilder leading leading: @Composable () -> Unit
level=1/2/3 level: Int level: Int
text content content: String content: String
SwiftUI
ios/Components/List/EBListItem.swift
Jetpack Compose
android/components/list/EBListItem.kt
Usage Snippets Planned API
Usage
// Default bullet
EBListItem("Transactions are reviewed within 24 hours.") {
    EBListMarker(variant: .bullet)
}

// Ordered with number
EBListItem("Enter your GCash PIN to continue.") {
    EBListMarker(variant: .numbered, number: 1)
}
.level(2)

// Custom asset via slot
EBListItem("Saved to Favorites") {
    Image(systemName: "heart.fill")
        .foregroundStyle(.red)
}
// Default bullet
EBListItem(content = "Transactions are reviewed within 24 hours.") {
    EBListMarker(variant = EBListMarker.Bullet)
}

// Ordered with number, level 2
EBListItem(
    content = "Enter your GCash PIN to continue.",
    level = 2
) {
    EBListMarker(variant = EBListMarker.Numbered, number = 1)
}

// Custom asset via slot
EBListItem(content = "Saved to Favorites") {
    Icon(painterResource(R.drawable.heart), contentDescription = null, tint = Color.Red)
}
Accessibility
RequirementiOSAndroid
List container role Wrap List Items in a List for VoiceOver row semantics Use Modifier.semantics { collectionInfo = ... } on parent
Marker semantics Decorative markers: .accessibilityHidden(true) on the asset Same — contentDescription = null
Numbered lists Prepend number to the announced label, or use .accessibilityValue Include number in contentDescription
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Simple row: asset + body text.
C2 Variant & Property Naming Needs Refinement level uses string values; consider dropping the prop entirely.
C3 Token Coverage Ready Body color, indent, gap tokens all bound.
C4 Native Mappability Ready HStack / Row with slot.
C5 Interaction State Coverage Ready Display-only; interaction lives on the consumer.
C6 Asset & Icon Quality Needs Refinement Instance-swap works; Figma Slot would be cleaner and map to native slot params.
C7 Code Connect Linkability Needs Refinement Not mapped. Slot adoption improves mapping quality.
Variants Inventory (3 total)

levelIndentWidthNode ID
10hug (body 270px)18482:34430
216px294px18482:34433
332px294px18482:34436
1.0.0 — April 2026Major
Initial Assessment · node 18482:34429
Component assessed — 3 variants (level 1/2/3). Composes List Item Asset via instance swap. Documented
Initial
level uses string values — Should be integer or dropped in favor of nesting-based indent. Open
C2 Open
Asset is instance-swap — Adopt Figma Slots for first-class slot mapping. Open
C6 Open
Code Connect mappings — Not registered. Open
C7 Open