---
title: "SeeAlso (3.x)"
description: "SeeAlso, links to machine-readable descriptions of 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/seeAlso
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).

# SeeAlso

The SeeAlso component is used to display a list of related resources. A machine-readable resource such as an XML or RDF description that is related to the current resource that has the seeAlso property. The resource may be of any media type, and contain any type of data.

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

### Code

```jsx
<SeeAlso
  seeAlso={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Dataset",
      format: "application/json",
      label: {
        none: ["Northwestern University Libraries Digital Collections API"],
      },
    },
  ]}
/>
```

### HTML

```html
<ul class="c-PJLV">
  <li class="c-PJLV">
    <a href="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275">
      Northwestern University Libraries Digital Collections API
    </a>
  </li>
</ul>
```

## Usage

### React

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

## API Reference

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

### Custom Element

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

### Code

```jsx
<SeeAlso
  seeAlso={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Dataset",
      format: "application/json",
      label: {
        none: ["Northwestern University Libraries Digital Collections API"],
      },
    },
  ]}
  as="ol"
/>
```

### HTML

```html
<ol class="c-PJLV">
  <li class="c-PJLV">
    <a href="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275">
      Northwestern University Libraries Digital Collections API
    </a>
  </li>
</ol>
```