Tocas UI Getting Started Components Examples
GitHub
Tocas UI

Timeline

A timeline presents activity chronologically.
Introduction
Getting Started Colors Responsive Utilities
Layout
Container Control Grid Wrap
Form
Button Checkbox Fieldset File Input Radio Select Selection Switch
Paragraphy
Box Content Divider Header Quote Text
Feedback
Blankslate Gauge Loading Mask Notice Procedure Progress Snackbar
Interaction
Accordion Dropdown Modal Popover Tooltip
Media
Flag Icon Iconset Image Imageset
Data
Badge Checklist Chip Close Conversation List Meta Rating Statistic Table Timeline
Navigation
Breadcrumb Menu Pagination Tab
Application
App Center App Drawer App Layout App Navbar App Sidebar App Topbar
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
Natsuno Hiyori has been assigned to this task.
This task is in the next update milestone.
Fuyushima Enishi mentioned this task.
<div class="ts-timeline">
    <div class="item is-active">
        <div class="indicator">
            <span class="ts-icon is-user-icon"></span>
        </div>
        <div class="content">Natsuno Hiyori has been assigned to this task.</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-signs-post-icon"></span>
        </div>
        <div class="content">This task is in the next update milestone.</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-quote-left-icon"></span>
        </div>
        <div class="content">Fuyushima Enishi mentioned this task.</div>
    </div>
</div>
Introduction

A timeline presents activity chronologically. If you want to indicate future events or steps, use Procedure.

Structure
Icon

Every item must have an icon to represent its content.

AM 07:01
Ate toast in the morning.
PM 02:46
Drank a glass of water. 
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-bread-slice-icon"></span>
        </div>
        <div class="content">
            <div class="ts-text is-description">AM 07:01</div>
            Ate toast in the morning.
        </div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-glass-water-icon"></span>
        </div>
        <div class="content">
            <div class="ts-text is-description">PM 02:46</div>
            Drank a glass of water.
        </div>
    </div>
</div>
Aside

The aside can be used to display additional information or images.

25/12
07:16
Door opened.
25/12
11:23
Door closed.
<div class="ts-timeline">
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">25/12<br>07:16</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-door-open-icon"></span>
        </div>
        <div class="content">Door opened.</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">25/12<br>11:23</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-door-closed-icon"></span>
        </div>
        <div class="content">Door closed.</div>
    </div>
</div>
Secondary

An item can be marked as secondary if it is less important or too verbose.

Harumachi Hashira reported the bug.
The bug has been fixed.
Reverted the last commit.
The bug has been resolved.
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-bug-icon"></span>
        </div>
        <div class="content">Harumachi Hashira reported the bug.</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">The bug has been fixed.</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">Reverted the last commit.</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">The bug has been resolved.</div>
    </div>
</div>
Break

A break indicates a pause or discontinuity in the timeline.

Fixing an unexpected error.
Issue has been deferred.
Security system monitoring for recurrence.
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-screwdriver-wrench-icon"></span>
        </div>
        <div class="content">Fixing an unexpected error.</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-pause-icon"></span>
        </div>
        <div class="content">Issue has been deferred.</div>
    </div>
    <div class="item is-break"></div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-eye-icon"></span>
        </div>
        <div class="content">Security system monitoring for recurrence.</div>
    </div>
</div>
States
Active

An item can be marked as active.

13/02
Buyer picked up the package.
13/02
The package has arrived.
12/02
The package has been shipped.
<div class="ts-timeline">
    <div class="item is-active">
        <div class="aside">
            <div class="ts-text is-description">13/02</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">Buyer picked up the package.</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">13/02</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-store-icon"></span>
        </div>
        <div class="content">The package has arrived.</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">12/02</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-truck-icon"></span>
        </div>
        <div class="content">The package has been shipped.</div>
    </div>
</div>
Disabled

An item can be marked as disabled.

Refund requested; amount returned to the card.
Purchased via VISA credit card for 320 TWD.
Order has been placed.
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-rotate-left-icon"></span>
        </div>
        <div class="content">Refund requested; amount returned to the card.</div>
    </div>
    <div class="item is-disabled">
        <div class="indicator">
            <span class="ts-icon is-credit-card-icon"></span>
        </div>
        <div class="content">Purchased via VISA credit card for 320 TWD.</div>
    </div>
    <div class="item is-disabled">
        <div class="indicator">
            <span class="ts-icon is-receipt-icon"></span>
        </div>
        <div class="content">Order has been placed.</div>
    </div>
</div>
Variations
Compact

A timeline can be compacted to reduce the space between items.

Player logged in.
Player picked up the Crown of Experience.
Player defeated the Magic Dragon.
<div class="ts-timeline is-compact">
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-person-icon"></span>
        </div>
        <div class="content">Player logged in.</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-crown-icon"></span>
        </div>
        <div class="content">Player picked up the Crown of Experience.</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-dragon-icon"></span>
        </div>
        <div class="content">Player defeated the Magic Dragon.</div>
    </div>
</div>
Negative

A timeline item can be marked as negative to indicate an error.

Download the latest system image file.
Copy files to the target system.
Building Linux version failed.
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-cloud-arrow-down-icon"></span>
        </div>
        <div class="content">Download the latest system image file.</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-copy-icon"></span>
        </div>
        <div class="content">Copy files to the target system.</div>
    </div>
    <div class="item is-negative">
        <div class="indicator">
            <span class="ts-icon is-xmark-icon"></span>
        </div>
        <div class="content">Building Linux version failed.</div>
    </div>
</div>
Compositions
Git Commits

A timeline that simulates the history of file changes on GitHub or other Git websites.

New code branch created.
A placeholder image
Fixed user login issue.
2 days ago
A placeholder image
Reverted the last change.
3 days ago
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-code-fork-icon"></span>
        </div>
        <div class="content">New code branch created.</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">
            <div class="ts-grid is-middle-aligned is-compact">
                <div class="column">
                    <span class="ts-image is-circular">
                        <img src="user.png" width="32">
                    </span>
                </div>
                <div class="column is-fluid">
                    Fixed user login issue.
                </div>
                <div class="column">2 days ago</div>
            </div>
        </div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">
            <div class="ts-grid is-middle-aligned is-compact">
                <div class="column">
                    <span class="ts-image is-circular">
                        <img src="user.png" width="32">
                    </span>
                </div>
                <div class="column is-fluid">
                    Reverted the last change.
                </div>
                <div class="column">3 days ago</div>
            </div>
        </div>
    </div>
</div>
Test Logs

Other components can be placed inside the content block to present detailed event information.

63 s
Run main tests.
System environment normal.
Did not pass security tests.
Username cannot be empty.
18 s
Check license key.
1 m 32 s
Initialize test environment.
<div class="ts-timeline">
    <div class="item is-negative">
        <div class="aside">
            <div class="ts-text is-description">63 s</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-xmark-icon"></span>
        </div>
        <div class="content">
            Run main tests.
            <div class="ts-content is-rounded is-secondary has-top-spaced">
                <div class="ts-checklist">
                    <div class="item is-positive">
                        System environment normal.
                    </div>
                    <div class="item is-negative">
                        Did not pass security tests.
                    </div>
                    <div class="item is-negative">
                        Username cannot be empty.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">18 s</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">Check license key.</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">1 m 32 s</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">Initialize test environment.</div>
    </div>
</div>
Looking for similar components?
Structure
Icon {{ts-icon}} Aside aside Secondary is-secondary Break is-break
States
Active is-active Disabled is-disabled
Variations
Compact is-compact Negative is-negative
Compositions
Git Commits {{ts-image}} Test Logs {{ts-content}}
GitHub Getting Started Components Examples
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI