Skip to Content

Label

<Clover.Label /><clover-label>0.5 kB added to a page with a Root, gzipped1 kB added to a page with a <clover-root>, styles included, gzipped

The resource’s label, or the current Canvas’s, in the reader’s language.

<Clover.Root iiifContent={url}>
  <Clover.Label as= of= />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-label as= of=></clover-label>
</clover-root>

API reference

Reads label from the Root’s resource, as plain text, and renders a span. It renders nothing while there is no label. Its other props, and its ref, go to its element.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose label: the resource’s, or the Canvas the reader is on.
labellanguage map or string—A label to show instead of the Root’s. Outside a Root, the one.
aselement type"span"The element to render: a heading, a paragraph, any other.
classNamestring—Added to clover-label.

<clover-label>

A label, as Label draws it, marked with the language it is in. Inside a clover-root, the Manifest's or the Canvas's; alone, the one it is given. Nothing is drawn while there is none, so a heading is never left empty.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose label: the Manifest's, or the Canvas in view's.
as"span" | "p" | "div" | "strong" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"spanThe element to draw: span, p, div, strong, em, or a heading, h1 to h6, to fit the page's outline.
labelstring (a URL or JSON)—A label to show instead: text, or a IIIF language map as JSON. Outside a root, the label to show.
.labelstring | Record<string, string[]> | null—As a property: A label to show instead, as text or a IIIF language map.

Examples

As a heading

Use as to make it a heading, at the level that fits your page’s outline: here, under an h3, an h4.

<Clover.Label as="h4" />
<clover-label as="h4"></clover-label>

The current Canvas

Use of="canvas" for the label of the Canvas in view. It changes as the reader moves.

<Clover.Body />
<Clover.Label of="canvas" as="p" />
<clover-body></clover-body> <clover-label of="canvas" as="p"></clover-label>

In its own language

A label is read in the Root’s language, else the page’s, and carries the language it is in as lang, so it is read aloud in that language. This newspaper’s label is German.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <Clover.Label as="p" />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <clover-label as="p"></clover-label>
</clover-root>

Previous versions

Clover 3.x › Label

  • Inside a Root<clover-root>, leave out label: it reads the resource’s own.
  • 3.x’s lang is the Root’s language.