Skip to Content

Summary

<Clover.Summary /><clover-summary>2 kB added to a page with a Root, gzipped7 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.

<Clover.Root iiifContent={url}>
  <Clover.Summary style={{ "--clover-summary-lines":  }} />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-summary style="--clover-summary-lines: "></clover-summary>
</clover-root>

API reference

Reads summary from the Root’s resource, as plain text or IIIF’s 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.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose summary: the resource’s, or the Canvas the reader is on.
valuelanguage map or string—A summary to show instead of the Root’s. Outside a Root, the one.
aselement type"p"The element to render.
classNamestring—Added to clover-summary.

<clover-summary>

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

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (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"pThe element to draw.
.valuestring | 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.

<Clover.Summary style={{ "--clover-summary-lines": 1 }} />
<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.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/tagging/manifest.json">
  <Clover.Body />
  <Clover.Summary of="canvas" />
</Clover.Root>
<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<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".

<Clover.ReadMore>
  <p className="my-note">{note}</p>
</Clover.ReadMore>
<clover-read-more>
  <p class="my-note">…</p>
</clover-read-more>
.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

  • summary is now value; inside a Root<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.