Timeline

The timeline component creates a vertical timeline of events or milestones. Each entry appears connected by a vertical line, creating a visual timeline effect.

Basic Usage

Create timeline entries using the entry class as a container/wrapper and the <time element as a child, as seen below. Other child elements will be copied over as is.

Copy
html
<ap-timeline>
    <div class="event">
        <time>January 2025</time>
        <h3>Event 1</h3>
        <p>Description of event 1</p>
    </div>
    <div class="event" data-background="#f0f0f0">
        <time>February 2025</time>
        <h3>Event 2</h3>
        <p>Description of event 2</p>
    </div>
    <div class="event">
        <time>March 2025</time>
        <h3>Event 3</h3>
        <p>Description of event 3</p>
    </div>
</ap-timeline>
Expand

Entry Structure

Each entry can contain any HTML content but should typically include:

• A heading for the event title
• Description text

Each entry must also include a <time> element or it breaks mobile usability.

Important Note

This element breaks convention to achieve its functionality by not using slotted elements. This will change in a future version, but for now, understand that due to the nature of how it works by copying its descendant elements into its Shadow DOM and modifying them before deleting the original element, you will need to exclude this element from being monitored and managed by frameworks such as React (by using the dangerouslySetHTML property in the case of React).