---
title: "PartOf (3.x)"
description: "Clover 3.x (@samvera/clover-iiif), the earlier version, documented for reference."
url: https://clover.iiif.library.northwestern.edu/docs/3.x/partOf
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).

# PartOf

A containing resource that includes the resource that has the partOf property.

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

### Code

```jsx
<PartOf
  partOf={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif",
      type: "Collection",
      label: {
        none: ["Commedia dell'Arte: The Masks of Antonio Fava"],
      },
      summary: {
        none: [
          "The Commedia dell'Arte, the famous improvisational theatre style born in Renaissance Italy, remains a major influence in today's theatre. Antonio Fava is an actor, comedian, author, director, musician, mask maker and Internationally renowned Maestro of Commedia dell'Arte.  The masks in this collection are all stored in the Charles Deering McCormick Library of Special Collections. Fava's book The Comic Mask in the Commedia dell'Arte is published by Northwestern University Press.",
        ],
      },
    },
  ]}
/>
```

### HTML

```html
<ul class="c-PJLV">
  <li class="c-PJLV">
    <a href="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
      Commedia dell'Arte: The Masks of Antonio Fava
    </a>
  </li>
</ul>
```

## Usage

### React

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

## API Reference

| Prop        | Type                                                   | Default | Required |
| ----------- | ------------------------------------------------------ | ------- | -------- |
| `as`        | `ol`, `ul`                                             | `ul`    | —        |
| `partOf`    | [partOf](https://iiif.io/api/presentation/3.0/#partof) | —       | **Yes**  |
| `className` | `string`, `undefined`                                  | —       | —        |
| `style`     | `CSSProperties`, `undefined`                           | —       | —        |
| `lang`      | `string`, `undefined`                                  | —       | —        |
| `title`     | `string`, `undefined`                                  | —       | —        |
| `data-*`    | `string`, `undefined`                                  | —       | —        |
| `aria-*`    | `AriaAttributes`, `undefined`                          | —       | —        |

### Custom Element

The `PartOf` component can be rendered as either `ol` or `ul` elements. The default is `ul`.

### Code

```jsx
<PartOf
  partOf={[
    {
      id: "https://digital.lib.utk.edu/assemble/collection/collections/rfta",
      type: "Collection",
      label: { en: ["Rising From the Ashes Oral Histories"] },
    },
    {
      id: "https://digital.lib.utk.edu/assemble/collection/collections/rftacuratedart",
      type: "Collection",
      label: {
        en: [
          "Rising from the Ashes: The Chimney Tops 2 Wildfires in Memory and Art",
        ],
      },
    },
  ]}
  as="ol"
/>
```

### HTML

```html
<ol class="c-PJLV">
  <li class="c-PJLV">
    <a href="https://digital.lib.utk.edu/assemble/collection/collections/rfta">
      Rising From the Ashes Oral Histories
    </a>
  </li>
  <li class="c-PJLV">
    <a href="https://digital.lib.utk.edu/assemble/collection/collections/rftacuratedart">
      Rising from the Ashes: The Chimney Tops 2 Wildfires in Memory and Art
    </a>
  </li>
</ol>
```