---
title: "Rendering (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/rendering
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).

# Rendering

The Rendering component is used to display a list of alternate formats related to a resource. Whereas SeeAlso is used to link to a machine-readable resource such as metadata, the Rendering component alerts users that the resource is available in another format such as PDF or ePub or has a related format. Because of the wide variety of formats that resources can be available in, the Rendering component is flexible and be of any media type and contain any type of data.

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

### Code

```jsx
<Rendering
  rendering={[
    {
      id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
      type: "Text",
      label: {
        en: ["PDF version"],
      },
      format: "application/pdf",
    },
  ]}
/>
```

### HTML

```html
<ul class="c-PJLV">
  <li class="c-PJLV">
    <a
      href="https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf"
      target="_blank"
    >
      PDF version
    </a>
  </li>
</ul>
```

## Usage

### React

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

## API Reference

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

### Custom Element

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

### Code

```jsx
<Rendering
  rendering={[
    {
      id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
      type: "Text",
      label: {
        en: ["PDF version"],
      },
      format: "application/pdf",
    },
  ]}
  as="ol"
/>
```

### HTML

```html
<ol class="c-PJLV">
  <li class="c-PJLV">
    <a href="https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf">
      PDF version
    </a>
  </li>
</ol>
```