Timeline

A vertical, dated sequence for project updates, milestones, and application history.

September 14, 2026

Library reopens

The main entrance and reading room are open again. Step-free access is available from Main Street.
July 6, 2026

Construction begins

Work starts on the entrance. Library services move to the community room during construction.
May 18, 2026

Design approved

The town approves the final design after the public comment period.

Show the markup

<ol class="cc-timeline" role="list" aria-label="Library improvement project updates">
  <li>
    <p class="cc-timeline__date"><time datetime="2026-09-14">September 14, 2026</time></p>
    <h3 class="cc-heading cc-heading--sm">Library reopens</h3>
    <p class="cc-paragraph">The main entrance and reading room are open again. Step-free access is available from Main Street.</p>
  </li>
  <li>
    <p class="cc-timeline__date"><time datetime="2026-07-06">July 6, 2026</time></p>
    <h3 class="cc-heading cc-heading--sm">Construction begins</h3>
    <p class="cc-paragraph">Work starts on the entrance. Library services move to the community room during construction.</p>
  </li>
  <li>
    <p class="cc-timeline__date"><time datetime="2026-05-18">May 18, 2026</time></p>
    <h3 class="cc-heading cc-heading--sm">Design approved</h3>
    <p class="cc-paragraph">The town approves the final design after the public comment period.</p>
  </li>
</ol>

Usage and accessibility

Use a timeline for events tied to dates. For instructions someone must follow, use Steps.
Keep a consistent chronological or reverse-chronological order. Put dates in time elements with machine-readable datetime values.
Keep the ordered-list structure and role="list"; the explicit role preserves list announcements in browsers that suppress them when list markers are removed.
The line and dots are decorative. Explain status in visible text instead of relying on the marker color.
Choose heading levels to fit the surrounding page. This vertical layout is unchanged on mobile.