Content Example

This demonstration page collects a dense set of markdown formatting examples so writers can scan common patterns, review syntax in context, and adapt the snippets when drafting their own Canopy IIIF content. Use this example page to see how core you can easily add IIIF-aware components inside your markdown content and learn how to use Image, Viewer, Map, Slider, and Timeline.

Components

Image

The <Image> component wraps Clover’s zoomable viewer so tiled IIIF imagery gains pan/zoom controls immediately. It’s ideal for highlighting details or pairing captions with large assets. Narratives can reference close-read details while the viewer keeps the render responsive, ensuring scholars can zoom into marginalia or annotations without leaving the flow of the prose.

Exhibits often pair short anecdotes or curatorial notes alongside a zoomed crop to guide attention. This makes the component perfect for layering storytelling over technical documentation, letting authors bridge archival description with interpretive copy in a single sweep of paragraphs.

Viewer

<Viewer> renders full manifests or collections via Clover, making it the go-to component for explorations that require canvases, audio/video, or multi-page navigation without leaving the document. It keeps navigation controls close at hand so readers dive into folios, listen to embedded recordings, or compare canvases while still following the surrounding essay.

Because the runtime reuses global viewer settings, editors can discuss sequencing decisions, cite particular canvases, or reference different manifestations of a work without duplicating markup. Use it when you want the narrative to feel like a guided tour that never requires a separate tab.

Map

Maps aggregate navPlace Point features and optional MapPoint callouts so geographic context sits alongside your prose. Use it for quick location overviews or to anchor itineraries. Authors can narrate journeys, trace expeditions, or compare regional clusters while markers update live, keeping spatial context woven into the storytelling.

When essays discuss routes or cite multiple repositories, sprinkling MapPoint entries reinforces scale and direction. The additional paragraph space lets you describe historical setting, travel logistics, or archival provenance while readers pan across the map.

Timeline

The Timeline component spaces events proportionally and can cross-reference manifests, letting you mix narrative beats with IIIF resources for lightweight chronologies. Use it to anchor longer essays where context depends on precise sequencing, or to punctuate a dense narrative with milestones that remain interactive.

Additional copy beneath the heading encourages readers to linger: outline curatorial themes, note historiographical debates, or call attention to metadata gaps that the timeline helps expose. It’s an easy way to pair transitional text with a structured visualization.

Empire in Moughal India

1750 – 1900

1750190018001850

1770Great Bengal FamineStarvation ravaged Company-controlled Bengal.

1781Bengal Atlas publishedJames Rennell mapped Eastern India for Company campaigns.

A Bengal atlas: containing maps of the theatre of war and commerce on that side of Hindoostan. Compiled from the original surveys; and published by the order of the honourable the Court of directors for the affairs of the East India company

1857Great MutinyIndian regiments rebelled across the north.

Repulse of a sortieAt head of title: No. 9

Slider

Sliders turn IIIF Collections or generated facet feeds into swipeable strips of cards that link back to work pages, perfect for highlighting themes without overwhelming the layout. They shine in sections where you want to highlight parallels—perhaps comparing textiles, portraits, or cartographic plates across decades—without building a bespoke gallery.

Because each slide resolves to a local work page, you can write connective prose before and after the carousel, using the extra paragraph to explain why these records belong together, what facets tie them, or which metadata values curated the set.

Basic Emphasis and Structure

Paragraphs can mix italics, bold, and bold italics alongside inline code to highlight commands or filenames. Use strikethrough sparingly when documenting deprecated options, and remember that links to references can sit inline with other text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer tincidunt efficitur eros, in porta mauris vel sapien sagittis, auctor feugiat orci malesuada. Vestibulum rhoncus libero eget urna bibendum, a accumsan nisl porttitor. Nulla facilisi, phasellus posuere pulvinar ligula, fermentum elementum velit.

Nested Elements

1. Ordered lists keep steps clear:
   1. Gather materials with curae facilisis lorem.
   2. Mix instructions and annotate with semicolons.
   3. Confirm results feel coherent.
2. The second big step encourages variation with gravida ipsum.
3. Final checks celebrate the finished section while referencing footnotes¹.

• Unordered lists highlight key takeaways:
  • Combine typography tricks.
  • Sprinkle latin filler where helpful.
  • Repeat motifs to boost rhythm.
• Mixing ordered and unordered structures demonstrates interplay.

Blockquotes introduce context or testimonials. "Praesent feugiat molestie risus, sed tempor nibh pulvinar at," according to a helpful reviewer, who praised the structured approach to formatting.

Images and Captions

The preceding pair of image embeds illustrate that multiple figures may appear in one section, each with descriptive alt text to maintain accessibility. Fusce eget tortor tellus, et imperdiet tortor. Aenean sed lorem egestas, elementum risus sed, interdum lacus.

Tables and Definition Lists

Term : Definition lists offer another way to link concepts with details, lorem ipsum dolor sit amet consectetur adipiscing elit.

Another Term : Add additional explanation to keep momentum, maecenas id posuere orci varius natoque penatibus magnis parturient.

Code Blocks

## Sample Code Block Add a code block with triple backticks, specify a language for syntax highlightingand include optional filename and copy attributes for enhanced display.

Task Lists & Callouts

• Capture checklists that double as project trackers.
• Keep at least one open item for future edits.
• Demonstrate GitHub flavored markdown compatibility.

Note: Donec fermentum libero et laoreet dictum. Integer hendrerit efficitur nisl, sed convallis sem.

Long Form Content

Paragraph Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque, mi sed lacinia posuere, nulla augue aliquet arcu, nec pharetra augue nisi non erat. Nunc a augue ultricies risus tempor volutpat. Mauris non metus ac neque interdum porta, curabitur laoreet. Integer posuere interdum sem, ac porttitor arcu pellentesque id. Duis elementum dui vitae magna fermentum, non euismod tellus ullamcorper. Sed vehicula libero vel sapien tempor sodales. Maecenas in lectus ac felis hendrerit congue non nec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer blandit mauris id ligula porttitor, eget rutrum magna convallis. Phasellus facilisis elit sed felis aliquet convallis. Donec sit amet luctus odio, eget dignissim justo. Ut consequat ipsum sed arcu commodo finibus a nec libero. Duis at ligula porttitor, dapibus ex sit amet, ullamcorper neque.

Proin venenatis fermentum vulputate. Sed tristique elit libero, sed efficitur quam aliquam id. Sed risus magna, aliquam id ex ac, gravida luctus mi. Vestibulum viverra aliquam mi eget tincidunt. Pellentesque eu egestas risus. Nam facilisis viverra nibh, id gravida augue malesuada ac. Ut sagittis pretium leo, eget sollicitudin arcu facilisis in. Pellentesque vel imperdiet dui. Integer ut lorem et justo rhoncus faucibus consectetur ut velit. Sed sed condimentum sem. Etiam tempor sagittis odio quis tincidunt. Nam nec volutpat ex. Fusce aliquam vestibulum mauris, ac lobortis tellus facilisis non. Mauris facilisis tincidunt neque, eget fermentum sapien fringilla sed. Pellentesque sollicitudin, enim ac elementum luctus, lacus nisi lacinia erat, vitae dapibus nisi diam vitae est.

Another Paragraph Section

Curabitur lobortis risus velit, quis sagittis sem dignissim non. Phasellus feugiat massa et lacus facilisis viverra. Donec metus quam, lacinia sed gravida eget, ullamcorper nec dui. Vivamus faucibus tortor sit amet libero venenatis accumsan. Vivamus mattis, nisl quis laoreet bibendum, velit ligula laoreet magna, ac interdum dui turpis a arcu. Aenean diam velit, convallis nec gravida sed, maximus ultrices erat. Integer scelerisque orci metus, condimentum ultricies ligula varius vel. Pellentesque semper eros sit amet hendrerit imperdiet. Proin porttitor bibendum augue vitae imperdiet. Nam vulputate nisi maximus facilisis porttitor. Suspendisse imperdiet mauris vitae metus ornare tristique. Integer posuere aliquam lorem non ultrices. Vestibulum facilisis sodales commodo. Duis vestibulum mauris nec sem suscipit tincidunt. Suspendisse porttitor orci pellentesque augue commodo tempus.

Aliquam et lectus lacinia, vestibulum lectus sed, dignissim ipsum. Nullam tincidunt feugiat dapibus. Duis pharetra nisl justo, id hendrerit odio pretium id. Donec dignissim vulputate arcu vitae cursus. Cras pretium fringilla risus, eget viverra quam suscipit a. In eu scelerisque arcu. Sed viverra, risus vitae aliquet gravida, risus lectus tincidunt justo, quis aliquet lectus augue ut odio. Aenean elementum diam urna. Ut sed gravida velit. Suspendisse lacus eros, vulputate at risus nec, laoreet sollicitudin leo. Vivamus scelerisque dignissim volutpat. Nullam bibendum ante ante, ac faucibus justo interdum vitae. Sed vitae dictum ligula, nec faucibus augue. Vivamus quis ante diam.²

Tabled Content

Praesent ornare arcu vitae nibh convallis cursus. Pellentesque ac neque risus. Nulla facilisi. Sed nisl lorem, mollis a odio sit amet, dictum ultricies mauris. Suspendisse eget ipsum nec sem commodo eleifend. Nulla pharetra ante eu dui porttitor pellentesque. Vestibulum lacinia purus vitae arcu aliquam, vitae ultrices mi pellentesque. Praesent feugiat est sed odio laoreet tempus. Etiam vestibulum aliquet risus, id porta leo suscipit eget.³

Detailed Walkthroughs

Step-by-Step Narrative

1. Begin with a precise description that explains the workflow and ties every action back to a practical goal; lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit turpis sed lacus porta, id suscipit urna faucibus.
2. Analyze context by referencing supporting material and by sprinkling in clarifying statements, etiam laoreet nulla nec condimentum egestas.
3. Execute the sequence, verifying that each sub-step remains legible; proin ullamcorper semper elit, ut varius purus varius at.
4. Wrap up with reflections, morbi ac arcu hendrerit, ornare ipsum non, rutrum lectus.

Supporting Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed sapien dui. Proin molestie volutpat venenatis. Pellentesque efficitur luctus nibh quis luctus. Nullam odio odio, posuere fermentum pretium eget, fermentum vitae lectus. Duis a ipsum augue. Pellentesque eu dui ac odio feugiat euismod vitae vitae neque. Donec massa nisl, pellentesque eget metus fermentum, vehicula cursus tellus. Suspendisse venenatis justo nisi, in laoreet neque feugiat quis. Curabitur auctor interdum facilisis. Nulla vel convallis magna. Vestibulum aliquet sapien quis ante vehicula, vitae vulputate est fermentum. Pellentesque hendrerit, dui vel accumsan ornare, neque massa dictum erat, ac imperdiet mauris nulla at lorem.

Sed posuere fermentum lacus, efficitur tincidunt mauris luctus eget. Etiam sed tempor erat. Etiam vel gravida leo, vel elementum ipsum. Integer consequat sagittis sem id blandit. Pellentesque rutrum sed ante non molestie. Suspendisse rhoncus urna at urna molestie, ut faucibus dui porttitor. Suspendisse potenti. Fusce et dictum enim. Donec pulvinar quam non leo interdum malesuada. Phasellus consectetur lacus non dolor placerat, at tempor urna interdum. Phasellus tempor facilisis iaculis. Pellentesque pharetra convallis libero non dignissim.

Variations on Formatting

• Bold statements stress an argument amid the flowing lorem ipsum pattern.
• Italic commentary signals a conceptual aside that still matters.
• inline snippets highlight commands or props like iiifContent.
• Combination text such as bold italic cues works for design tokens like bg-brand.

1. Ordered sequences remain useful when presenting API request steps.
2. Long enumerations may include supporting details that reference the earlier sections for continuity.
3. Inline formulas such as n = a^2 + b^2 survive inside a list without disruption.

Footnote Practice and References

Content that cites sources can place footnote markers at convenient pauses. Donec efficitur augue ut lacus tristique, sed facilisis massa facilisis. Nulla imperdiet nisi sed ante lacinia gravida. Nullam imperdiet nisl id orci varius malesuada. Sed iaculis nisl in nulla imperdiet, semper pulvinar nibh finibus. Pellentesque dictum arcu lorem, vitae tempor leo mollis id. Mauris finibus orci sit amet ante tristique accumsan. Vestibulum rutrum tellus sit amet sollicitudin tempor⁴, and ut cursus arcu dolor, in euismod sem rutrum non.

Curabitur rutrum congue maximus. Donec pharetra quam ac pretium blandit. Nam interdum erat ac eros blandit, at maximus orci accumsan. Sed at fermentum odio. Praesent eu libero eu ipsum tempor luctus sed eget est. Maecenas felis ipsum, suscipit eget iaculis in, dapibus non nibh. Cras fermentum augue eget augue convallis porta. Sed eget placerat libero, eget lacinia leo. Mauris lobortis tincidunt velit nec vulputate. Vestibulum lacus quam, iaculis sit amet dictum eget, consequat at eros.

Closing Thoughts

The concluding section reaffirms that markdown offers countless expressive opportunities, from inline styling to interactive lists. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl purus, mollis sed neque vel, commodo porttitor metus. Sed facilisis nisi sit amet justo aliquet, non porttitor odio luctus. Integer tincidunt diam nec mi pulvinar, in sed felis faucibus. Morbi fermentum lacus sit amet ligula bibendum malesuada. Vestibulum ac urna libero. Sed posuere et ipsum in eleifend. Duis imperdiet aliquet enim optio. Pellentesque augue arcu, gravida in sagittis vitae, malesuada varius justo. Duis vestibulum odio non ligula vehicula pellentesque. Integer volutpat iaculis orci, sed feugiat magna varius vitae.⁵