Demo: every content component

This is ordinary body copy. It renders at body size in the muted tone, which lets headings and bolded phrases stand out in full blue. Contrast carries the hierarchy, not size: the type scale has four steps and is not gaining a fifth.

An internal link points to our guides, an external one to the CNESST. The first is rewritten into client-side navigation, the second leaves as nofollow in a new tab.

Headings and vertical rhythm

An h2 opens a section. The space above it is always larger than the space below, so each section reads as a block rather than a run of lines.

A third level

The h3 is body copy at semibold, in full blue. Against muted text the difference reads clearly without needing another size step.

A label

The h4 is a small spaced caption. It gets no anchor, so it never shows up in the table of contents — which keeps the right rail readable.

Images

An image written as ordinary markdown. The alt text doubles as the caption, so write it as a sentence rather than a filename.

The same image as a Figure, with a caption and credit separate from the alt text:

A different ratio, here 21/9:

A screenshot keeps its original proportions and gets a frame:

Three images in a grid, useful for a before/after or a series:

Before

During

After

A video loads nothing until it is clicked:

Callouts

A standard markdown quote, with its attribution on a second line:

You don't fix an engagement problem with a survey. You fix it with a decision.

— Kim Arsenault, Inlead RH

Figures and lists

An ordinary bulleted list:

• The first point, with a green bullet.
• The second point, which can hold bold and a link.
• The third point.

A numbered list:

1. First step.
2. Second step.
3. Third step.

An action list, distinct from an ordinary list because it is a deliverable in its own right:

Tables

The FAQ

The Faq component also emits FAQPage structured data, once per page.

The call to action