---
title: "Primitives"
description: "The property parts, one for each IIIF descriptive property, to place anywhere in a layout or use on their own."
url: https://clover.iiif.library.northwestern.edu/docs/primitives
version: "4"
---

# Primitives

A part for each IIIF descriptive property, to place anywhere in a layout or use on its own.

> **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
<Clover.Root iiifContent={url}>
  <Clover.Thumbnail size={160} alt="" />
  <Clover.Label as="h2" />
  <Clover.Summary />
  <Clover.Rights />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-thumbnail size="160" alt=""></clover-thumbnail>
  <clover-label as="h2"></clover-label>
  <clover-summary></clover-summary>
  <clover-rights></clover-rights>
</clover-root>
```

## The parts

Inside a `Root` (web components: `<clover-root>`), each reads its property from the resource, or with `of="canvas"` from the Canvas the reader is on, wherever it sits in your markup. Give it a `value` (a `label`, for `Label` (web components: `<clover-label>`)), and it shows that instead, in a `Root` (web components: `<clover-root>`) or on its own. With nothing to show, it renders nothing.

- [`Label` (web components: `<clover-label>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/label): `label`, as text.
- [`Thumbnail` (web components: `<clover-thumbnail>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/thumbnail): `thumbnail`, as an image named by its label.
- [`Summary` (web components: `<clover-summary>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/summary): `summary`, cut short with Read more.
- [`Metadata` (web components: `<clover-metadata>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/metadata): `metadata`, as a list of labels and values.
- [`RequiredStatement` (web components: `<clover-required-statement>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/required-statement): `requiredStatement`, the text that must be shown with the resource.
- [`Rights` (web components: `<clover-rights>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/rights): `rights`, as a link to the license or rights statement.
- [`Homepage` (web components: `<clover-homepage>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/homepage): `homepage`, the resource’s own web page.
- [`SeeAlso` (web components: `<clover-see-also>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/see-also): `seeAlso`, descriptions of it elsewhere.
- [`Rendering` (web components: `<clover-rendering>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/rendering): `rendering`, other formats of it, such as a PDF.
- [`PartOf` (web components: `<clover-part-of>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/part-of): `partOf`, the Collections it belongs to.
- [`Id` (web components: `<clover-id>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/id): `id`, as a link to its IIIF JSON.
- [`Provider` (web components: `<clover-provider>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/provider): `provider`, who provided it, each with its logo and its name, linked to its homepage. A compound part: the parts in it read that provider.
- [`Logo` (web components: `<clover-logo>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/logo): a provider’s `logo`, named by the provider.
- [`Value` (web components: `<clover-value>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/value): any IIIF language map you hold, read by its `format`.

The [Panel](https://clover.iiif.library.northwestern.edu/docs/panel)’s About section shows several of them together.

## Languages

Text is read in the Root’s `language`, else the page’s `<html lang>`, else the browser’s languages: the closest language the value has (`fr` for a reader in `fr-CA`), else its `none`, else the first it has. A language’s several values are joined with commas.

Each element carries the language its text is in as `lang`, so assistive technology reads it in that language. Text in `none` carries no `lang`, and takes the page’s.

## HTML

IIIF allows a little HTML in its values. A value is HTML when it runs from a first `<` to a last `>`, as IIIF’s rule has it; any other value is shown as written, its line breaks kept.

- `Summary` (web components: `<clover-summary>`), the values of `Metadata` (web components: `<clover-metadata>`) and `RequiredStatement` (web components: `<clover-required-statement>`), and `Value` (web components: `<clover-value>`) show HTML. `Label` (web components: `<clover-label>`), a link’s label and a thumbnail’s `alt` are plain text.
- HTML is limited to what the Presentation API allows: `a`, `b`, `br`, `i`, `img`, `p`, `small`, `span`, `sub` and `sup`, with links to `http:`, `https:` and `mailto:` only. `lang` and `dir` are kept, so a value can mark a phrase in another language.
- The sanitizer, DOMPurify (about 9 kB gzip), loads only when a value carries markup. Until it arrives, the value shows as plain text.
- In `Summary` (web components: `<clover-summary>`), `Metadata` (web components: `<clover-metadata>`) and `RequiredStatement` (web components: `<clover-required-statement>`), links are underlined, and long unbroken text wraps.