---
title: "Metadata"
description: "The metadata of the resource, or of the current Canvas, as a description list of labels and values in the reader's language."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/metadata
version: "4"
---

# Metadata

\<Clover.Metadata /> (web components: \<clover-metadata>)1 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s metadata, or the current Canvas’s, as a list of labels and values.

> **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.Metadata
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    }}
  />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-metadata
    style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr))">
  </clover-metadata>
</clover-root>
```

## API reference

Reads `metadata` from the Root’s resource and renders a description list, each label a `dt` and each value a `dd`. A value may be IIIF’s [HTML](https://clover.iiif.library.northwestern.edu/docs/primitives#html). It renders nothing while there is no metadata. Its other props go to the `dl`.

**React**

| Prop          | Type                     | Default      | Description                                                      |
| ------------- | ------------------------ | ------------ | ---------------------------------------------------------------- |
| `of`          | `"manifest" \| "canvas"` | `"manifest"` | Whose metadata: the resource’s, or the Canvas the reader is on.  |
| `value`       | `{ label, value }[]`     | —            | Pairs to show instead of the Root’s. Outside a `Root`, the ones. |
| `renderValue` | `(item) => ReactNode`    | —            | A value of your own; Clover’s where it returns `undefined`.      |
| `className`   | `string`                 | —            | Added to `clover-metadata`.                                      |

**Web components**

### `<clover-metadata>`

The metadata, as a description list of labels and their values.

| Name           | Type                                                                                                                            | Default    | Description                                                                                                        |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
| `of`           | `"manifest" \| "canvas"`                                                                                                        | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                                           |
| `value`        | `string (a URL or JSON)`                                                                                                        | —          | Metadata, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.                          |
| `.value`       | `Array<{ label: Record<string, string[]>; value: Record<string, string[]> }> \| null`                                           | —          | As a property: Metadata, instead of the root's.                                                                    |
| `.renderValue` | `((item: { label: Record<string, string[]>; value: Record<string, string[]> }) => Node \| string \| null \| undefined) \| null` | —          | Your own drawing of a value: a node or text to show in its place, or undefined for Clover's. A new node each time. |

## Examples

### Columns

Lay the pairs out with your CSS. Each is a `div` around its `dt` and `dd`, its label as `data-label` (`date`, `alternate-title`) for your selectors.

> **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.Metadata
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(14rem, 1fr))",
  }}
/>
```

**Web components**

```html
<clover-metadata
  style="
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  "></clover-metadata>
```

### Pairs of your own

Give it `value` to show pairs you hold, in a `Root` (web components: `<clover-root>`) or 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.Metadata
  value={[
    { label: { none: ["Date"] }, value: { none: ["1896"] } },
    {
      label: { none: ["Publisher"] },
      value: { none: ["The White Sewing Machine Co."] },
    },
  ]}
/>
```

**Web components**

```html
<clover-metadata
  value='[{"label":{"none":["Date"]},"value":{"none":["1896"]}},{"label":{"none":["Publisher"]},"value":{"none":["The White Sewing Machine Co."]}}]'></clover-metadata>
```

### Values of your own

`renderValue` (web components: `.renderValue`) is called with each pair: return what its `dd` holds, or `undefined` for Clover’s. Here each subject links to a search. A value you render carries no `lang`, so mark one in another language yourself.

**React**

```jsx
import { Fragment } from "react";
 
function renderValue(item) {
  if (item.label.none?.[0] !== "Subject") return undefined;
  return (item.value.none ?? []).map((subject, index) => (
    <Fragment key={subject}>
      {index > 0 && ", "}
      <a href={`/search?subject=${encodeURIComponent(subject)}`}>{subject}</a>
    </Fragment>
  ));
}
 
<Clover.Metadata renderValue={renderValue} />;
```

**Web components**

```html
<clover-metadata></clover-metadata>
 
<script type="module">
  document.querySelector("clover-metadata").renderValue = (item) => {
    if (item.label.none?.[0] !== "Subject") return undefined;
    const subjects = document.createDocumentFragment();
    (item.value.none ?? []).forEach((subject, index) => {
      if (index > 0) subjects.append(", ");
      const link = document.createElement("a");
      link.href = `/search?subject=${encodeURIComponent(subject)}`;
      link.textContent = subject;
      subjects.append(link);
    });
    return subjects;
  };
</script>
```

## Previous versions

[Clover 3.x › Metadata](https://clover.iiif.library.northwestern.edu/docs/3.x/metadata)

- `metadata` is now `value`; inside a `Root` (web components: `<clover-root>`), leave it out.
- `customValueContent` is `renderValue` (web components: `.renderValue`).
- A language’s values are joined with commas: no `customValueDelimiter`.
- 3.x’s `lang` is the Root’s `language`.