Timeline

Timelines are a great way to show historical events to and provide context to for how things have changed over time.

Timeline

Delivered, Garage / Other Door / Other Location at Address

March 26, 2025, 4:36 p.m.

James Trapero

Example longer content shown as a note for reference in the future.

January 02, 2024, 6:29 a.m

Out for Delivery

January 02, 2024, 6:29 a.m

See Markup Example

<div class="timeline">
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content">
            Delivered, Garage / Other Door / Other Location at Address
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 12:59 a.m</small>
            </div>
        </div>
    </div>
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content is-dropdown">
            <div class="card-timeline--dropdown collapsed" data-bs-toggle="collapse"
                    href="#exampleEvent" aria-expanded="false" role="button"  aria-controls="exampleEvent">
                    <span class="">Example timeline event message that has collapsed.</span>
                    <div class="ti ti-chevron-up ml-2 text-primary"></div>
                </div>
                <div class="p-2 collapse" id="exampleEvent">
                <dl>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                </dl>
            </div>
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 12:59 a.m</small>
            </div>
        </div>
    </div>
    <div class="card-timeline--item is-note">
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <div class="row align-items-start">
                        <div class="col">
                            <h4 class="mb-1">
                                James Trapero
                            </h4>
                        </div>
                    </div>
                </div>
                <p>
                    Example longer content shown as a note for reference in the future.
                </p>
                <div class="card-timeline--date text-muted">
                    <small>January 02, 2024, 12:59 a.m</small>
                </div>
            </div>
        </div>
    </div>
    <div class="card-timeline--item no-event">
        <div class="card-timeline--dot"></div>
    </div>
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content">
            Out for Delivery
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 6:29 a.m</small>
            </div>
        </div>
    </div>
</div>