---
title: "Homepage (3.x)"
description: "Homepage, a link to the web page about what a IIIF resource represents. Clover 3.x (@samvera/clover-iiif), the earlier version, kept for reference."
url: https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/homepage
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).

# Homepage

A web page that is about the object represented by the resource that has the homepage property.

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

### Code

```jsx
<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
/>
```

### HTML

```html
<a
  href="https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275"
  class="c-PJLV"
>
  Homepage at Northwestern University Libraries Digital Collections
</a>
```

## Usage

### React

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

### Next.js

If using Next.js, you will want to render your `Homepage` component as a Next.js [Link](https://nextjs.org/docs/api-reference/next/link) component. To do so, pass the `Homepage` component with the `as` prop using `Link`.

```jsx
import Link from "next/link";
import { Primitives as IIIF } from "@samvera/clover-iiif/primitives";
 
const CustomHomepage = ({ homepage }) => {
  return <Homepage homepage={homepage} as={Link} />;
};
 
export default CustomHomepage;
```

## API Reference

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

### HTML Attributes

`Homepage`, 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.

In the following example, an `onClick()` function will display an with the `data-homepage-id` attribute value.

### Code

```jsx
<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
  role="button"
  data-homepage-id="https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275"
  onClick={(e) => {
    e.preventDefault();
    alert(e.target.dataset.homepageId);
  }}
/>
```

### HTML

```html
<a
  href="https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275"
  role="button"
  class="c-PJLV"
>
  Homepage at Northwestern University Libraries Digital Collections
</a>
```

### Wrapping Children

The `Homepage` component can also be used to wrap React children. The link then gets an `aria-label` with the value of the homepage `label`, which replaces the children as its accessible name. Keep the visible text a part of that label (here, “Homepage”), so speech-input users can say what they see.

### Code

```jsx
<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
>
  <span>Homepage</span>
</Homepage>
```

### HTML

```html
<a
  aria-label="Homepage at Northwestern University Libraries Digital Collections"
  href="https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275"
  class="c-PJLV"
>
  <span>Homepage</span>
</a>
```