--- title: "Items" description: "A sequence and where the reader is in it, as thumbnails in a slider, a list or a grid, or one item at a time." url: https://clover.iiif.library.northwestern.edu/docs/items version: "4" --- # Items \ (web components: \)10 kB added to a page with a Root, gzipped (web components: 27 kB added to a page with a \, styles included, gzipped) A sequence and where the reader is in it: thumbnails in a slider, a list or a grid, or one item at a time. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ## API reference Inside a `Root` (web components: ``), it lists the resource’s views (a spread is one item), and selecting one goes there: a listbox whose selection follows focus and the arrow keys. On its own, it lists a Collection’s members as links. A Manifest or Collection read right to left (`viewingDirection` (web components: `viewing-direction`)) runs its items leftward, its first on the right, the arrows, the arrow keys and the pager’s steps with it. **React** | Prop | Type | Default | Description | | --------------- | ---------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `layout` | `"slider" \| "list" \| "grid" \| "pager"` | `"slider"` | Thumbnails in a row, a column or a grid, or one at a time. | | `of` | `"views" \| "members" \| "targets" \| "annotations"` | `"views"` | In a `Root`: its views, its Collection’s members, a content state’s targets (two or more), each opening its Manifest at its place, or annotations walked as one whole: an AnnotationPage or AnnotationCollection given as the content, else an AnnotationCollection the Manifest’s pages are part of, each picked on its Canvas. | | `size` | `"large" \| "small"` | `"large"` | The pager’s size: round controls, or its steps and count as Search’s are, for a header’s line. | | `iiifContent` | `string \| object` | — | On its own: a Collection (its members) or a Manifest. | | `items` | `object[]` | — | On its own: IIIF resources to list as they are. | | `navigation` | `"id" \| "homepage"` | `"id"`; `"homepage"` on its own | Select a view, or link to each item’s `homepage`. | | `onSelect` | `(item, event) => void` | — | An item was chosen; on a link, `preventDefault()` stays put. | | `header` | `boolean` | `true` | On its own: the resource’s label, summary and homepage link. | | `headingLevel` | `number` | `2` | On its own: the header’s title level. | | `thumbnailSize` | `number` | `200` | Pixels asked for each thumbnail’s longer side. | | `renderItem` | `(item, { selected }) => ReactNode` | — | Your own item in place of the figure. | | `request` | `{ credentials, headers, fetch }` | The Root’s | On its own: for every request. | | `language` | `string` | The reader’s | On its own: the language to read IIIF text in. | | `highContrast` | `boolean` | `false` | Clover’s higher-contrast mode: the accent kept to rings, outlines and marks, never under words or a glyph. Inside a `Root`, the Root’s too; on wherever the reader’s system asks for more contrast. | **Web components** ### `` Thumbnails, as Items draws them. Inside a clover-root, its views (or its Collection's members), choosing what it shows; alone, the members or views of what it is given, as links. | Name | Type | Default | Description | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `layout` | `"slider" \| "list" \| "grid" \| "pager"` | `slider` | A scrolling row, a column, a wrapping grid, or a pager: Previous, the position and Next, with no thumbnails. | | `size` | `"large" \| "small"` | `large` | The pager's size: large, round controls; or small, its steps and count as Search's are, for a header's line. | | `of` | `"views" \| "members" \| "targets" \| "annotations"` | `views` | Inside a root: its views, the members of the Collection it belongs to, a content state's targets, where it names two or more, each opening its Manifest at its place, or annotations walked as one whole (the AnnotationPage or AnnotationCollection given as the content, else the AnnotationCollection its annotation pages are part of), each picked and framed on its Canvas. | | `navigation` | `"id" \| "homepage"` | — | id chooses what the root shows; homepage links to each item's homepage. By default, id for views and homepage for members or a list. | | `iiif-content` | `string` | — | Alone: a Collection (its members) or a Manifest (its views), by URL. | | `header` | `boolean` | `true` | Alone: the resource's label, summary and homepage over the items. "false" leaves them out. | | `heading-level` | `number` | `2` | Alone: the header's title's level, 2 or more, to fit the page's outline. | | `thumbnail-size` | `number` | `200` | Pixels to ask for each thumbnail's longer side. | | `language` | `string` | — | Alone: the language to read IIIF text in. | | `high-contrast` | `boolean` | `false` | Clover's higher-contrast mode, for what is inside: the accent kept to rings, outlines and marks, never under words or a glyph, where the controls' dark fill takes its place, edged in the accent. On wherever the reader's system asks for more contrast, too. | | `.iiifContent` | `string \| Record \| null` | — | As a property: Alone: what to list, as a URL or a IIIF resource. | | `.items` | `unknown[] \| null` | — | Alone: a list of IIIF resources to show, as they are. | | `.request` | `{ credentials?: RequestCredentials; headers?: Record; fetch?: typeof fetch } \| null` | — | Alone: credentials, headers and a fetch of your own. In a root, the root's are used. | | `.renderItem` | `((item: { id: string; label?: string \| Record; summary?: string \| Record; href?: string }, state: { selected: boolean }) => Node \| string \| null \| undefined) \| null` | — | Your own figure for an item, in place of its thumbnail and label: a node or text, which names the item. A new node each time. | | `clover-select` | `{ item: { id: string; label?: string \| Record; summary?: string \| Record; href?: string } }` | — | An event. An item was chosen. Cancel it (preventDefault) to keep a link from being followed. | ## Examples ### Grid Use `layout="grid"` for thumbnails that wrap into rows. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### List Use `layout="list"` for a column, each item’s title beside its picture. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### One at a time Use `layout="pager"` for the count with Previous and Next, and no thumbnails. It steps a spread at a time through a paged book. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### Size Size the thumbnails with CSS: `--clover-items-height` for a slider’s pictures (default `8rem`), `--clover-items-size` for a grid’s columns (`10rem`), `--clover-items-gap` between them (`1rem`). > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### A Collection Give it a Collection on its own, and it lists the members as links to each one’s `homepage`, under the Collection’s label and summary. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ## Previous versions [Clover 3.x › Slider](https://clover.iiif.library.northwestern.edu/docs/3.x/slider) - `Items` (web components: ``) replaces both the Slider and the Viewer’s thumbnail strip. - Sizes and breakpoints are CSS: `--clover-items-height`, `--clover-items-gap`. - `onItemInteraction` is `onSelect` (web components: `clover-select`).