Summary
SliderOverflowCards arranges 1–4+ Card instances in a single horizontal row. When the number of cards exceeds what fits the container width, cards become fixed-width and overflow the right edge — the last visible card is partially obscured by a fade gradient with an overlaid chevron IconButton signalling more content. With few cards (1–3 at a given breakpoint) the cards stretch/fit to fill the width with no overflow.
Anatomy
- 1root — horizontal auto-layout track. Reference width 360 (xs) / 800 (md), item spacing 12.
- 2Card — repeated Card instance. On the slider:
Height Fill: true,State: default, slots off,hasStatusIndicator: true, min width 113 (xs) / 191 (md). - 3SliderOverflowEdgeGradient — 60px fade overlay on the overflow edge (variant
right). Opaque → transparent. Overflow case only. - 4IconButton — chevron advance affordance overlaid on the gradient (size md, variant neutral, appearance outline, 36×36). Overflow case only.
📝Parts 3 & 4 appear only in the overflow (items = 4+) case; they are absent for 1 / 2 / 3.
Properties / API
| Property | Type / values | Default | Description |
|---|---|---|---|
breakpoint | xs · md | xs | Drives container reference width and per-card min/fixed width. |
items | 1 · 2 · 3 · 4+ | 1 | Number of cards. 1–3 fit/fill the width; 4+ triggers fixed-width cards + overflow gradient + chevron. |
📝No other public props on the slider itself; per-card content props (tagline/heading/subheading, status) are owned by the embedded Card.
Variants
Two variant axes — breakpoint (xs / md) × items (1 / 2 / 3 / 4+). No appearance/theme/colour variants on the slider.
States
The slider container defines no interactive state matrix. The embedded Card is pinned to State: default and the IconButton to default / not-disabled. Treat per-card / IconButton states as inherited.
Card sizing
Card sizing is driven by the combination of breakpoint and items:
| breakpoint | items | Card resizing | Card width | Min width |
|---|---|---|---|---|
| xs | 1 | Fill | fills container | 113 |
| xs | 2 | Fill (two-up) | ~half − gap | 113 |
| xs | 3 | Fixed | 154 | 113 |
| xs | 4+ | Fixed | 154 | 113 |
| md | 3 | Fill | fills | 191 |
| md | 4+ | Fixed | 208 | 208 |
💡Rule of thumb: while cards still fit they use Fill resizing and share the width; once they no longer fit (≈4+) each card snaps to a fixed width (154 xs / 208 md) and the row overflows.
Scroll / overflow behaviour
- Single horizontal row (auto-layout, item spacing 12, no wrap).
- In the 4+ case the row extends past the right edge of
root(root horizontal resizing = fixed) → content scrolls horizontally. - The right edge shows the 60px
SliderOverflowEdgeGradientfade with a chevronIconButtoncentred on it as the advance affordance.
⚠️No explicit snap points, scroll-snap alignment, momentum or autoplay are specified. Treat as free horizontal scroll with an advance button; confirm snap intent with design if your platform needs it.
Breakpoints
Only xs and md are defined (no sm/lg/xl).
| Breakpoint | root width | Card min width | Cards before overflow | Card width (4+) | Gap | Edge peek |
|---|---|---|---|---|---|---|
| xs | 360 | 113 | up to 3 | 154 (fixed) | 12 | 60px right fade + chevron |
| md | 800 | 191 (3-up) / 208 (4+) | up to 3 | 208 (fixed, min 208) | 12 | 60px right fade + chevron |
📝Gap (item spacing) is a constant 12 at both breakpoints. No per-breakpoint edge inset beyond the 60px right-edge overflow peek.
Design tokens
- Gap / spacing: 12 (item spacing).
- Radius: border-radius-lg 20 · border-radius-full 9999.
- Edge gradient: bg-gradient-primary-start #f7f7f8 → …-end #f7f7f800 (transparent).
- Card surface: bg-secondary #ffffff · border border-primary #c8c9cb.
- Status dot: green-400 #37c871.
- Text: text-primary #2a2a2d · text-secondary #696a6d.
- Card shadow: shadow-bevel — drop #0000000a 0/2/8 + inner #ffffff00 0/0.5.
- Type (from Card): caption 12/18 · subHeading 16/22 · subBody 14/20 (Inter).
Accessibility
⚠️No accessibility section on the Figma page — guidance below is recommended; confirm with design.
- Keyboard: horizontal arrow keys move between cards; the chevron IconButton must be tab-focusable and Enter/Space-activatable.
- Focus order: left-to-right through cards, then the advance button; off-screen cards become reachable as they scroll in.
- Screen reader: expose the row as a list / carousel with item count and position; label the chevron (e.g. “Next” / “Show more”).
Usage
📝No Do/Don't section exists on the Figma page. Recommended: use for a browsable set of peer items where horizontal space is limited; keep card content scannable; ensure the overflow affordance is visible whenever content extends past the edge.
Implementation status
No native implementation exists yet — fresh build per platform. Depends on the Card component.
Android
iOS
macOS
Windows
Changelog
- v1.016.6.2026
- Initial release.
Ticket scaffold
Title: SliderOverflowCards v1.0 — build edge-peeking card carousel [PLATFORM]
Acceptance criteria
- Horizontal track of Card instances, 12px gap, no wrap.
breakpoint(xs/md) anditems(1/2/3/4+) drive Fill vs Fixed card sizing per the table.- Overflow (4+) shows the 60px right-edge fade gradient + chevron advance button.
- Horizontal scroll works; advance button scrolls the track.
- Cards reuse the shared Card component (depends on Card v1.0).
- Carousel semantics + keyboard scroll + labelled advance button for AT.
Jira ticket template
Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate one per platform.
Jira · duplicate per platform
h2. [PLATFORM] · SliderOverflowCards v1.0 — build edge-peeking card carousel
*Project / Epic* : [EPIC-KEY] Aurora AppKit · Supernova
*Issue type* : Story
*Components* : SliderOverflowCards · [PLATFORM]
*Labels* : aurora-appkit, supernova, design-system, slider-overflow-cards
*Priority* : [Medium]
*Story points* : [estimate]
*Fix version* : SliderOverflowCards v1.0
*Sprint* : [sprint]
*Assignee* : [assignee]
h3. Background
New horizontal carousel of Card instances. When cards exceed the container width they become fixed-width and overflow the right edge, with a fade gradient + chevron button signalling more content.
h3. Objective
Build SliderOverflowCards v1.0 on [PLATFORM]: the horizontal track, sizing logic, and overflow affordance, mapped to [PLATFORM] conventions.
h3. Design source
* Figma — "Aurora AppKit · Components" -> SliderOverflowCards page (Specs, Changelog frames)
* Handover spec — supernova-handover/slideroverflowcards.html
* [paste the platform-specific Figma frame link]
h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* Properties : {{breakpoint}} (xs | md) · {{items}} (1 | 2 | 3 | 4+)
* Track : single horizontal row, item spacing 12, no wrap
* Card sizing :
*# xs : 1 -> Fill · 2 -> Fill (two-up) · 3 and 4+ -> Fixed 154 (min 113)
*# md : up to 3 -> Fill (min 191) · 4+ -> Fixed 208 (min 208)
* Overflow (4+ only) : last card peeks under a 60-wide {{SliderOverflowEdgeGradient}} (variant right, {{bg-gradient-primary-start}} -> transparent) with an IconButton chevron (size md, neutral, outline, 36x36) as the advance control
* Cards reuse the Card component pinned to state default, slots off, height-fill true
h3. Scope
In scope : the slider + sizing + overflow affordance on [PLATFORM] at xs / md.
Out of scope : the Card internals; snap/momentum unless design confirms; other platforms.
h3. Dependencies
* Card v1.0 and IconButton on [PLATFORM] (BLOCKER: Card must land first)
h3. Acceptance criteria
# 1-3 cards fill/fit the width with no overflow; 4+ snaps cards to the fixed width and the row overflows horizontally.
# Overflow shows the 60-wide right-edge fade gradient with a centred chevron advance button.
# Horizontal scroll works; the advance button scrolls the track.
# Item spacing is a constant 12 at both breakpoints; min widths per the table.
# Carousel exposes list/position semantics; chevron is keyboard-focusable and labelled (e.g. "Next" / "Show more"); off-screen cards become reachable as they scroll in.
h3. Definition of Done
* Matches the Figma Specs (visual diff) at xs / md
* Tokens only; reuses the shared Card component
* Tests updated; reviewed and merged; version v1.0; changelog updated
* Keyboard + screen-reader pass for the carousel
h3. QA / test notes
* Test 1/2/3/4+ at xs and md; verify Fill vs Fixed and the peek
* Confirm the advance button and keyboard scrolling reach every card
Source: Figma “Aurora AppKit – Components” · SliderOverflowCards page · Specs & Changelog frames. Styled with the Aurora vibe package. Compiled 30.6.2026.