---
title: "Metadata (3.x)"
description: "Metadata, the label and value pairs that describe a IIIF resource. Clover 3.x (@samvera/clover-iiif), the earlier version, kept for reference."
url: https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/metadata
version: "3.x, the earlier version, superseded by Clover 4"
---

> This page documents **Clover 3.x**, `@samvera/clover-iiif`, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: [Get started](https://clover.iiif.library.northwestern.edu/docs).

# Metadata

An ordered list of descriptions to be displayed to the user when they interact with the resource, given as pairs of human readable `label` and `value` entries.

[metadata ↗](https://iiif.io/api/presentation/3.0/#metadata)

### Code

```jsx
<Metadata
  metadata={[
    {
      label: {
        none: ["Creator"],
      },
      value: {
        none: ["Fava, Antonio, 1949-"],
      },
    },
    {
      label: {
        none: ["Date"],
      },
      value: {
        none: ["2012"],
      },
    },
  ]}
/>
```

### HTML

```html
<dl class="c-PJLV">
  <div data-label="creator">
    <dt class="c-PJLV">Creator</dt>
    <dd class="c-PJLV">Fava, Antonio, 1949-</dd>
  </div>
  <div data-label="date">
    <dt class="c-PJLV">Date</dt>
    <dd class="c-PJLV">2012</dd>
  </div>
</dl>
```

## Usage

### React

```jsx
import { Metadata } from "@samvera/clover-iiif/primitives";
 
const CustomMetadata = ({ metadata }) => {
  return <Metadata metadata={metadata} />;
};
 
export default CustomMetadata;
```

## API Reference

| Prop                   | Type                                                       | Default | Required |
| ---------------------- | ---------------------------------------------------------- | ------- | -------- |
| `as`                   | `dl`                                                       | `dl`    | —        |
| `metadata`             | [metadata](https://iiif.io/api/presentation/3.0/#metadata) | —       | **Yes**  |
| `customValueContent`   | `PrimitivesCustomValueContent[]`                           | —       | —        |
| `customValueDelimiter` | string?                                                    | `,`     | —        |
| `className`            | `string`, `undefined`                                      | —       | —        |
| `style`                | `CSSProperties`, `undefined`                               | —       | —        |
| `lang`                 | `string`, `undefined`                                      | —       | —        |
| `title`                | `string`, `undefined`                                      | —       | —        |
| `data-*`               | `string`, `undefined`                                      | —       | —        |
| `aria-*`               | `AriaAttributes`, `undefined`                              | —       | —        |

### HTML Attributes

`Metadata`, like all Clover IIIF primitives accept common [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) attributes. Use the JSX style `className` prop to add custom classes. The same attribute methodology can be used for `id`, `style`, `title`, `data-*`, and `aria-*` props.

### Code

```jsx
<Metadata
  metadata={[
    {
      label: {
        none: ["Creator"],
      },
      value: {
        none: ["Fava, Antonio, 1949-"],
      },
    },
    {
      label: {
        none: ["Date"],
      },
      value: {
        none: ["2012"],
      },
    },
  ]}
  style={{ fontStyle: "italic" }}
/>
```

### HTML

```html
<dl style="font-style: italic;" class="c-PJLV">
  <div data-label="creator">
    <dt class="c-PJLV">Creator</dt>
    <dd class="c-PJLV">Fava, Antonio, 1949-</dd>
  </div>
  <div data-label="date">
    <dt class="c-PJLV">Date</dt>
    <dd class="c-PJLV">2012</dd>
  </div>
</dl>
```

### Language

Additional to being rendered to the DOM like other attributes, the value of [`lang`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang) will couple with [InternationalString](https://github.com/IIIF-Commons/presentation-3-types/blob/main/iiif/descriptive.d.ts#L6-L8) props to output the denoted `label`, `value`, `summary` entries. If `lang` is undefined, entries will default to the first entry in the array index. The value of `lang` should be a two letter [BCP 47](https://datatracker.ietf.org/doc/html/rfc5646) language code.

### Code

```jsx
<Metadata
  metadata={[
    {
      label: {
        en: ["Associated"],
        de: ["Beteiligte"],
      },
      value: {
        en: ["Jan Brueghel the Elder"],
        de: ["Jan (der Ältere) Brueghel"],
      },
    },
    {
      label: {
        en: ["Technique"],
        de: ["Technik"],
      },
      value: {
        en: ["Oil", "copper"],
        de: ["Öl", "Kupfer"],
      },
    },
  ]}
  lang="de"
/>
```

### HTML

```html
<dl lang="de" class="c-PJLV">
  <div data-label="associated">
    <dt lang="de" class="c-PJLV">
      Beteiligte
    </dt>
    <dd lang="de" class="c-PJLV">
      Jan (der Ältere) Brueghel
    </dd>
  </div>
  <div data-label="technique">
    <dt lang="de" class="c-PJLV">
      Technik
    </dt>
    <dd lang="de" class="c-PJLV">
      Öl, Kupfer
    </dd>
  </div>
</dl>
```

### Custom Values

If a consuming application requires rendering specific `metadata` item `values` in a custom pattern, the `customValueContent` prop can be used. The pattern requires `matchingLabel` following <https://iiif.io/api/presentation/3.0/#label> and `Content` as a `ReactElement` carrying `props`. The element set for `Content` must map `props.value` to the appropriate code in the custom pattern.

In the example below, the value of **Pantaloon** with a matching `label` of `{ none: ["Subject"] }` would be rendered as `<dd><a href="https://example.org/?subject=Pantaloon">Pantaloon</a><dd>`, while the `value` entry of **comic masks** would render simply as `<dd>comic masks</dd>`.

```jsx
const metadata = [
  {
    label: { none: ["Genre"] },
    value: { none: ["comic masks"] },
  },
  {
    label: { none: ["Subject"] },
    value: { none: ["Pantaloon"] },
  },
];
 
const CustomValueSubject = (props) => (
  <a href={encodeURI(`https://example.org/?subject=${props.value}`)}>
    {props.value}
  </a>
);
 
const customValueContent = [
  {
    matchingLabel: { none: ["Subject"] },
    Content: <CustomValueSubject />,
  },
];
 
return <Metadata metadata={metadata} customValueContent={customValueContent} />;
```

### Custom Delimiter

### Code

```jsx
<Metadata
  metadata={[
    {
      label: {
        none: ["Subject"],
      },
      value: {
        none: [
          "Masks",
          "Commedia dell'arte",
          "Italian drama (Comedy)",
          "Zanni (Fictitious character)",
        ],
      },
    },
  ]}
  customValueDelimiter="<br/>"
/>
```

### HTML

```html
<dl class="c-PJLV">
  <div data-label="subject">
    <dt class="c-PJLV">Subject</dt>
    <dd class="c-PJLV">
      Masks<br>
      Commedia dell'arte<br>
      Italian drama (Comedy)<br>
      Zanni (Fictitious character)
    </dd>
  </div>
</dl>
```