Documentation
Summary

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 (opens in a new tab). 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 ↗ 
<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.",
    ],
  }}
/>

Usage

React

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

API Reference

PropTypeDefaultRequired
asspan, h1, h2, h3, h4, h5, h6, pspan--
summarysummary (opens in a new tab)--Yes
classNamestring, undefined----
styleCSSProperties, undefined----
langstring, undefined----
titlestring, 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.

<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 Attributes

Summary, like all Clover IIIF primitives accept common HTMLElement (opens in a new tab) 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.

<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 }}
/>

Language

Additional to being rendered to the DOM like other attributes, the value of lang (opens in a new tab) will couple with InternationalString (opens in a new tab) 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 (opens in a new tab) 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.

<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"
/>
SeeAlsoThumbnail