---
title: "Summary"
description: "The summary of the resource, or of the current Canvas, cut to five lines with Read more when it runs longer."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/summary
version: "4"
---

# Summary

\<Clover.Summary /> (web components: \<clover-summary>)2 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s summary, or the current Canvas’s, cut short with Read more.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Summary style={{ "--clover-summary-lines": 5 }} />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-summary style="--clover-summary-lines: 5"></clover-summary>
</clover-root>
```

## API reference

Reads `summary` from the Root’s resource, as plain text or IIIF’s [HTML](https://clover.iiif.library.northwestern.edu/docs/primitives#html), and renders a `p`. Past five lines it is cut short, with a Read more button under it. It renders nothing while there is no summary. Its other props go to its element.

**React**

| Prop        | Type                     | Default      | Description                                                         |
| ----------- | ------------------------ | ------------ | ------------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"` | `"manifest"` | Whose summary: the resource’s, or the Canvas the reader is on.      |
| `value`     | language map or `string` | —            | A summary to show instead of the Root’s. Outside a `Root`, the one. |
| `as`        | element type             | `"p"`        | The element to render.                                              |
| `className` | `string`                 | —            | Added to `clover-summary`.                                          |

**Web components**

### `<clover-summary>`

The summary, as sanitized HTML, cut to five lines with Read more under it when it runs longer (--clover-summary-lines).

| Name     | Type                                         | Default    | Description                                                                                |
| -------- | -------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------ |
| `of`     | `"manifest" \| "canvas"`                     | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                   |
| `value`  | `string (a URL or JSON)`                     | —          | A summary, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `as`     | `"p" \| "div" \| "span"`                     | `p`        | The element to draw.                                                                       |
| `.value` | `string \| Record<string, string[]> \| null` | —          | As a property: A summary, instead of the root's.                                           |

## Examples

### Lines

Set `--clover-summary-lines` on it, or on anything around it, for more or fewer lines than five; `none` shows it whole. Read more opens it in full, and Read less cuts it short again.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Summary style={{ "--clover-summary-lines": 1 }} />
```

**Web components**

```html
<clover-summary style="--clover-summary-lines: 1"></clover-summary>
```

### The current Canvas

Use `of="canvas"` for the summary of the Canvas in view, as this photogravure’s plate has.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/tagging/manifest.json">
  <Clover.Body />
  <Clover.Summary of="canvas" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/tagging/manifest.json">
  <clover-body></clover-body>
  <clover-summary of="canvas"></clover-summary>
</clover-root>
```

### Text of your own

`ReadMore` (web components: `<clover-read-more>`) gives text of your own the same button. Wrap one element, and clamp it in your CSS while it is not `data-read-more="open"`.

**React**

```jsx
<Clover.ReadMore>
  <p className="my-note">{note}</p>
</Clover.ReadMore>
```

**Web components**

```html
<clover-read-more>
  <p class="my-note">…</p>
</clover-read-more>
```

```css
.my-note:not([data-read-more="open"]) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

## Previous versions

[Clover 3.x › Summary](https://clover.iiif.library.northwestern.edu/docs/3.x/summary)

- `summary` is now `value`; inside a `Root` (web components: `<clover-root>`), leave it out.
- It renders a `p` by default, not a `span`.
- Long summaries are cut short, with Read more.
- 3.x’s `lang` is the Root’s `language`.