Timeline Item

A single entry on the Timeline — a square image, a coloured date pill, a heading, and a short line of copy.

Only used inside the Timeline section.

Settings

Setting	What it does
Image	Shown as a square, so a square crop works best. A non-square image is cropped to fill. Leave empty to show the text on its own.
Date	The pill above the heading. A year, a range, or any short label — it doesn’t have to be a real date. Shown in uppercase.
Date pill colour	Sky (default), Sun, or Fern.
Heading	The entry’s title.
Heading level	H2, H3 (default), or H4.
Text	The line of copy beneath the heading.
Side	Which side of the desktop rail this entry sits on. Automatic (default), Left, or Right.

Tips

Vary the pill colour between entries

The three colours have no meaning attached — they exist so consecutive entries don’t look identical. Cycle them (Sky → Sun → Fern → Sky…) so the same colour never lands on two entries side by side.

Leave “Side” on Automatic

Entries alternate left and right on their own, in the order you add them, and that ordering stays correct when you reorder or hide one.

Only set Left or Right to force a specific entry to a side. Doing so for one entry doesn’t renumber the rest — the others keep alternating by position, so forcing one can put two entries on the same side. Check the result on desktop after changing it.

Keep every entry’s heading at the same level

The heading level is per-entry, so it’s possible to mix H2 and H3 down the list. Don’t — a screen reader reads the levels as a document outline, and mixing them makes the timeline read as nested sub-sections instead of a flat list of events.

Images are decorative

Each entry’s image is treated as decorative and given empty alt text, because the heading and copy beside it already carry the meaning. Don’t put information in the image that isn’t also in the text.