Shelf
A row of films that scrolls sideways and runs to the screen edge on phones.
import { Shelf } from '@iffday/web/src/kit';Example
Shelf lays its children in one row that scrolls sideways and settles at the start of a tile. Three widths: sm 128px, md 164px, lg 200px. On phones the row runs past the page gutter to the screen edge, the gap tightens from 18px to 12px, and md and lg get narrower.
Films12
See allPossible Love2026
The Handmaiden2016
Dust2026
Angel’s Egg1985
Nagi Notes2026
Parallel Tales2026
Fjord2026
Red Rocks2026
Yellow Letters2026
Midday Meal2026
Satoko Always2026
import { useT } from '@iffday/i18n';
import { FilmTile, SectionHeader, Shelf } from '@iffday/web/src/kit';
import { useSampleFilms } from '../../../samples';
export default function Example() {
const t = useT();
const films = useSampleFilms();
return (
<section>
<SectionHeader title={t('festival.films')} count={films.length} to="/components/film-tile" />
<Shelf label={t('festival.films')}>
{films.map((film) => (
<FilmTile
key={film.id}
entry={film}
to={`https://iff.day${film.canonicalPath}`}
subtitle={film.year}
/>
))}
</Shelf>
</section>
);
}Usage
Give the row a SectionHeader that names it and links to the full list. label names the row, which a screen reader reads as a list.
Props
A horizontally scrolling row that bleeds to the viewport edge on phones.
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
label | string | |
size | 'sm' | 'md' | 'lg' | 'md' |