Shelf card
A row of artwork, like a shelf in a TV app. Layouts turn it into a spotlight, a week, tickets, a desk of documents, windows or a Cover Flow.
Variations
Section titled “Variations”10 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.
shelf · next steps
Section titled “shelf · next steps”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · documents
Section titled “shelf · documents”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · archive
Section titled “shelf · archive”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · poster
Section titled “shelf · poster”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · stack
Section titled “shelf · stack”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · photo stack
Section titled “shelf · photo stack”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · one
Section titled “shelf · one”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · spotlight
Section titled “shelf · spotlight”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · week
Section titled “shelf · week”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
shelf · tickets
Section titled “shelf · tickets”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
Fields
Section titled “Fields”Every card also takes the fields all cards share.
| Field | Type | What it does |
|---|---|---|
type | 'shelf' | |
items | ShelfItem[] | |
aspect? | 'poster' | 'square' | 'wide' | |
empty? | string | |
stack? | boolean | |
archived? | string | |
layout? | 'row' | 'spotlight' | 'week' | 'tickets' | 'desk' | 'windows' | 'coverflow' |
stack: a pile of pages that fans out · archived: where archived things can be found, with an unarchive action beside archive
ShelfItem
Section titled “ShelfItem”A horizontal shelf of artwork (posters, albums, photos), like a row in the Apple TV app.
| Field | Type | What it does |
|---|---|---|
id? | string | |
mark? | string | |
at? | string | |
title | string | |
subtitle? | string | |
note? | string | |
image? | string | |
badge? | string | |
href? | string | |
backdrop? | string | |
tone? | Tone | |
cta? | { label: string; href: string } | |
doc? | { sender?: string; date?: string; type?: string } |
cta: the next step, which the whole tile then opens · doc: a document’s columns in list view
Used by
Section titled “Used by”Sonarr / Radarr · Karakeep · Paperless · RomM · Seerr · Plex (Tautulli)