Skip to Content

Clover is a project of Northwestern University Libraries.

A viewer as distinctive as your collections.

Design a user experience rooted in IIIF.

Try the templates

Use a template…

Demo each in the Viewer above.

Get started

…or build your own.

IIIF building blocks that snap together.

Root components

  • Body: The Root's current view, drawn by Canvas or by a renderer of your own, in a box with a height.
  • Canvas: Clover's own renderer for IIIF Canvases: images, video and sound on one pan and zoom surface, on its own or in a Root.
  • Timeline: Clover's player for IIIF Presentation 4 Timelines: sound, played as a music app plays it, with its artwork, Canvas's transport, captions as lyrics and chapters as tracks, on its own or in a Root.
  • Scene: Clover's 3D view for IIIF Presentation 4 Scenes: glTF models, lit and framed, turned and zoomed by pointer, key or control, on its own or in a Root.
  • Items: A sequence and where the reader is in it, as thumbnails in a slider, a list or a grid, or one item at a time.
  • Panel: What a IIIF resource says about itself, in sections as tabs or an accordion, including sections of your own.
  • Annotations: Every annotation of a IIIF resource, by layer and by Canvas, to read, to find on the Canvas, and to hide from it.
  • Collection: The Collection a Manifest is in, described and its members listed, and a menu of its members to move between them.
  • Contents: A Manifest's table of contents from its Ranges, the entry the reader is in marked, each entry going to its Canvas.
  • Search: IIIF Content Search of the Root's Manifest, version 1 or 2: a field, then the hits by Canvas with the words around them, drawn on the Canvas.
  • Transcript: The words of the recording or page in view: its captions as text, the cue playing marked, or its transcript as plain text.
  • Download: The rendering of the page in view and of the Manifest, a PDF, a text or a full-size file, as links in two groups.
  • Map: Where a IIIF resource is, on a map: its navPlace places, and its georeferenced images laid over the ground.

Primitives

  • Primitives: The property parts, one for each IIIF descriptive property, to place anywhere in a layout or use on their own.
  • Label: The resource's label, or the current Canvas's, in the reader's language, in the element you choose.
  • Thumbnail: A small picture of the resource, or of the current Canvas, as an image named by its label.
  • Summary: The summary of the resource, or of the current Canvas, cut to five lines with Read more when it runs longer.
  • Metadata: The metadata of the resource, or of the current Canvas, as a description list of labels and values in the reader's language.
  • RequiredStatement: The required statement of the resource, or of the current Canvas, such as an attribution, as a label and value in the reader's language.
  • Rights: The rights of the resource, or of the current Canvas, as a link to its license or rights statement.
  • Homepage: A IIIF resource's homepage, the web pages about it, as a list of links, each named by its label.
  • SeeAlso: A IIIF resource's seeAlso, the machine-readable descriptions of it elsewhere, as a list of links.
  • Rendering: A IIIF resource's rendering, the other formats it comes in, such as a PDF or a transcript, as a list of links.
  • PartOf: A IIIF resource's partOf, the Collections it belongs to, as a list of links, each named by its label.
  • Id: A IIIF resource's id, its own address, as a link.
  • Provider: Who provided a IIIF resource, its provider, each with its logo and its name linked to its homepage. A compound part, whose parts read the provider they are drawn for.
  • Logo: A IIIF provider's logo, each of the resource's providers' in turn, its alt text the provider's name; inside a Provider, that provider's.
  • Value: Any IIIF language map you hold, in the reader's language, read strictly by its format as plain text, IIIF's HTML or Markdown.

Thoughtful and flexible.

Clover is designed with the full spectrum of user experience in mind, for every visitor, every layout and every IIIF resource.

Read the docs

Multimodal first.

Images, audio/video, 3D models and the printed page all open in the same viewer, each with the controls it needs. Choose one and the example viewer takes it in.

Made for everyone.

With all people in mind, Clover sets a high bar for accessibility. Screen readers understand its WAI-ARIA patterns, its colors meet contrast rules, and its controls work from the keyboard alone.

2.2 AA Built to WCAG compliance

Inherits your brand.

Clover doesn’t bring a font or a base size of its own. It takes on yours, and its colors are CSS custom properties, so your brand is a few lines away.

1rem Inherited sizing

CSS Variables for styling

Color Clover blue
main {
  font-family: "Google Sans", sans-serif;
  --clover-color-accent: #0F62FE;
}

Compose your own.

Arrange the components you see here into a layout that shapes your vision. Clover’s ready-to-go templates are built the same way.

27 IIIF-focused components

Minimal load for users.

Every part of Clover is built with intention and shared across its templates, so your projects can reserve their weight and the screen for rich cultural heritage material, not bloated code.

What each part adds to a page with a Root, gzipped: Thumbnail 2 kB, Label 0.5 kB, Body 34 kB, Items 10 kB, Summary 2 kB, Metadata 1 kB.What each element adds to a page with a <clover-root>, its styles with it, gzipped: <clover-thumbnail> 7 kB, <clover-label> 1 kB, <clover-body> 53 kB, <clover-items> 27 kB, <clover-summary> 7 kB, <clover-metadata> 7 kB.

94 kB All the Viewer needs

102 kB All the Viewer needs

Reads the IIIF cookbook.

Clover gains IIIF fluency from building blocks designed natively to open specifications. Code and components are crafted toward recipes, with 66 handled in the cookbook.

Install is easy.

Use it in React or as web components, and you’re up and running in seconds.

Get started
npm install @nulib/clover