---
title: "Summary (3.x)"
description: "Summary, a short description 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/summary
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).

# Summary

The Summary component is used to display a short description of the resource. It is a wrapper around the [IIIF Presentation API 3.0 summary property](https://iiif.io/api/presentation/3.0/#summary). The summary property is a multi-lingual field that can be used to provide a short description of the resource. It is recommended that the summary be less than 250 characters. The summary property is intended to be displayed to the user when the resource is being selected from a list of search results or resources.

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

### Code

```jsx
<Summary
  summary={{
    none: [
      "In early zannesque comedy, all the female characters were comic, grotesque, and played by men. Zagna, the feminine counterpart to Zanni, is the formal, comic-grotesque exaggeration of the woman. The actors wore female clothing over an exaggerated female body, an effect achieved with the addition of excessive, carnivalesque accessories.  The Zagna mask, similar if not identical to the male mask, was worn with a scarf to cover the head.",
    ],
  }}
/>
```

### HTML

```html
<span class="c-PJLV">
  In early zannesque comedy, all the female characters were comic,
  grotesque, and played by men. Zagna, the feminine counterpart to Zanni, is
  the formal, comic-grotesque exaggeration of the woman. The actors wore
  female clothing over an exaggerated female body, an effect achieved with
  the addition of excessive, carnivalesque accessories. The Zagna mask,
  similar if not identical to the male mask, was worn with a scarf to cover
  the head.
</span>
```

## Usage

### React

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

## API Reference

| Prop        | Type                                                     | Default | Required |
| ----------- | -------------------------------------------------------- | ------- | -------- |
| `as`        | `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`          | `span`  | —        |
| `summary`   | [summary](https://iiif.io/api/presentation/3.0/#summary) | —       | **Yes**  |
| `className` | `string`, `undefined`                                    | —       | —        |
| `style`     | `CSSProperties`, `undefined`                             | —       | —        |
| `lang`      | `string`, `undefined`                                    | —       | —        |
| `title`     | `string`, `undefined`                                    | —       | —        |
| `data-*`    | `string`, `undefined`                                    | —       | —        |
| `aria-*`    | `AriaAttributes`, `undefined`                            | —       | —        |

### Custom Element

The `Summary` component can be rendered as `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `p`. The default is `span`.

### Code

```jsx
<Summary
  summary={{
    en: [
      'Interview with Michelle Childs, professor with the Retail, Hospitality, and Tourism Management department of UT. Childs discusses the effects of the wildfire on the businesses in Gatlinburg primarily over an extended time frame. She talks about the preparedness of businesses with contacting employees during the fire and in terms of insurance coverage. She also elaborates on the initial return of tourists to the area, and the steady recovery of the area. This is a representative quote from the interview: "What was really interesting because likely its such a small, tightknit community that those personal stories were really intertwined with the business stories."',
    ],
  }}
  as="p"
/>
```

### HTML

```html
<p class="c-PJLV">
  Interview with Michelle Childs, professor with the Retail, Hospitality,
  and Tourism Management department of UT. Childs discusses the effects of
  the wildfire on the businesses in Gatlinburg primarily over an extended
  time frame. She talks about the preparedness of businesses with contacting
  employees during the fire and in terms of insurance coverage. She also
  elaborates on the initial return of tourists to the area, and the steady
  recovery of the area. This is a representative quote from the interview:
  "What was really interesting because likely its such a small, tightknit
  community that those personal stories were really intertwined with the
  business stories."
</p>
```

### HTML Attributes

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

### Code

```jsx
<Summary
  summary={{
    none: [
      "Robin Goodfellow playing a horn that ends in a dragon-head in front of a Berkeley Folk Music Festival sign. Digital scan of a black and white negative.",
    ],
  }}
  style={{ fontStyle: "italic", opacity: 0.8 }}
/>
```

### HTML

```html
<span style="font-style: italic; opacity: 0.8;" class="c-PJLV">
  Robin Goodfellow playing a horn that ends in a dragon-head in front of a
  Berkeley Folk Music Festival sign. Digital scan of a black and white
  negative.
</span>
```

### Language

Additional to being rendered to the DOM like other attributes, the value of [`lang`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang) will couple with [InternationalString](https://github.com/IIIF-Commons/presentation-3-types/blob/main/iiif/descriptive.d.ts#L6-L8) props to output the denoted `label`, `value`, `summary` entries. If `lang` is undefined, entries will default to the first entry in the array index. The value of `lang` should be a two letter [BCP 47](https://datatracker.ietf.org/doc/html/rfc5646) language code.

In this example we will render Arabic entries from the `summary` prop. The `lang` prop will be set to `ar` and `dir` will be set to `rtl` for right-to-left reading.

### Code

```jsx
<Summary
  summary={{
    en: [
      "The Messenger of God, may God bless him and grant him peace, if the son of a sultan is free, he will not die until he is king, if he is a slave, he will write it down on a tablet and drink once and bathe once and hang one on the road until he returns safe and sound.",
    ],
    ar: [
      "رسول الله صلى اعلي إن كان ولد سلطان يكون بحرمة الخاتم لا يموت حتى يكون ملك, إن كان عبد يكون الحر, من يمشي الى سفر كتبه في لوح و شرب واحد و غسل واحد و علق واحد لايرا مصيبة الطريق حتى يرجع سالما غانما, من كتبه ولحد",
    ],
  }}
  as="p"
  dir="rtl"
  lang="ar"
/>
```

### HTML

```html
<p dir="rtl" lang="ar" class="c-PJLV">
  رسول الله صلى اعلي إن كان ولد سلطان يكون بحرمة الخاتم لا يموت حتى يكون
  ملك, إن كان عبد يكون الحر, من يمشي الى سفر كتبه في لوح و شرب واحد و غسل
  واحد و علق واحد لايرا مصيبة الطريق حتى يرجع سالما غانما, من كتبه ولحد
</p>
```