Timeline — SoftUI

Default

Project Created

The project repository was initialized and the team was assembled.

Design Phase

Wireframes and mockups were reviewed and approved by stakeholders.

Development Started

Sprint 1 kicked off with core feature implementation.

Launch

Version 1.0 deployed to production.

<div class="sui-timeline">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Project Created</h6>
      <p>The project repository was initialized and the team was assembled.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Design Phase</h6>
      <p>Wireframes and mockups were reviewed and approved by stakeholders.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Development Started</h6>
      <p>Sprint 1 kicked off with core feature implementation.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Launch</h6>
      <p>Version 1.0 deployed to production.</p>
    </div>
  </div>
</div>

Right Aligned

Order Placed

Your order #4821 has been confirmed.

Processing

Payment verified, preparing shipment.

Shipped

Package dispatched via express delivery.

<div class="sui-timeline sui-timeline-right">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Order Placed</h6>
      <p>Your order #4821 has been confirmed.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Processing</h6>
      <p>Payment verified, preparing shipment.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Shipped</h6>
      <p>Package dispatched via express delivery.</p>
    </div>
  </div>
</div>

Alternating

Requirement Gathering

Stakeholder interviews completed and scope defined.

Architecture Review

System design approved by the engineering leads.

Beta Release

Internal beta launched to select users for feedback.

General Availability

Public release with full documentation.

<div class="sui-timeline sui-timeline-alternate">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Requirement Gathering</h6>
      <p>Stakeholder interviews completed and scope defined.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Architecture Review</h6>
      <p>System design approved by the engineering leads.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Beta Release</h6>
      <p>Internal beta launched to select users for feedback.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>General Availability</h6>
      <p>Public release with full documentation.</p>
    </div>
  </div>
</div>

Opposite Content

9:30 am

Stand-up Meeting

Daily sync with the engineering team.

10:00 am

Code Review

Reviewed pull requests for the auth module.

12:00 pm

Lunch Break

Team lunch at the new place downtown.

2:00 pm

Sprint Planning

Prioritized backlog items for the next sprint.

<div class="sui-timeline sui-timeline-alternate">
  <div class="sui-timeline-item">
    <div class="sui-timeline-opposite">9:30 am</div>
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Stand-up Meeting</h6>
      <p>Daily sync with the engineering team.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-opposite">10:00 am</div>
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Code Review</h6>
      <p>Reviewed pull requests for the auth module.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-opposite">12:00 pm</div>
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Lunch Break</h6>
      <p>Team lunch at the new place downtown.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-opposite">2:00 pm</div>
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Sprint Planning</h6>
      <p>Prioritized backlog items for the next sprint.</p>
    </div>
  </div>
</div>

Colored Dots

Build Passed

All tests passed on CI pipeline.

Deploy to Staging

Changes pushed to the staging environment.

Performance Warning

Response time exceeded 500ms threshold.

Deployment Failed

Rollback triggered due to health check failure.

Investigating

Team is reviewing logs and monitoring metrics.

<div class="sui-timeline">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-success"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Build Passed</h6>
      <p>All tests passed on CI pipeline.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-primary"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Deploy to Staging</h6>
      <p>Changes pushed to the staging environment.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-warning"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Performance Warning</h6>
      <p>Response time exceeded 500ms threshold.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-danger"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Deployment Failed</h6>
      <p>Rollback triggered due to health check failure.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-info"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Investigating</h6>
      <p>Team is reviewing logs and monitoring metrics.</p>
    </div>
  </div>
</div>

Outlined Dots

Pending Review

Awaiting approval from the security team.

In Progress

Feature branch is being actively developed.

Approved

Code review passed with no blocking comments.

Rejected

Changes requested — missing test coverage.

<div class="sui-timeline">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-outline"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Pending Review</h6>
      <p>Awaiting approval from the security team.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-outline sui-timeline-dot-primary"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>In Progress</h6>
      <p>Feature branch is being actively developed.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-outline sui-timeline-dot-success"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Approved</h6>
      <p>Code review passed with no blocking comments.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-outline sui-timeline-dot-danger"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Rejected</h6>
      <p>Changes requested — missing test coverage.</p>
    </div>
  </div>
</div>

Inset Dots

Draft Created

Initial document saved as draft.

Under Review

Submitted for team review.

Approved

All reviewers signed off.

Archived

Document moved to archive.

<div class="sui-timeline">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-inset"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Draft Created</h6>
      <p>Initial document saved as draft.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-inset sui-timeline-dot-primary"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Under Review</h6>
      <p>Submitted for team review.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-inset sui-timeline-dot-success"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Approved</h6>
      <p>All reviewers signed off.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-inset sui-timeline-dot-danger"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Archived</h6>
      <p>Document moved to archive.</p>
    </div>
  </div>
</div>

Icon Dots

Payment Received

Invoice #1042 paid via credit card.

Confirmation Sent

Email receipt sent to customer.

Shipped

Package dispatched — tracking number provided.

Out for Delivery

Expected arrival today before 5 PM.

<div class="sui-timeline">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-icon sui-timeline-dot-success">
        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Payment Received</h6>
      <p>Invoice #1042 paid via credit card.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-icon sui-timeline-dot-primary">
        <svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><polyline points="2 7 12 13 22 7"/></svg>
      </div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Confirmation Sent</h6>
      <p>Email receipt sent to customer.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-icon sui-timeline-dot-info">
        <svg viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 20 16 8 16 8 13"/><circle cx="12" cy="16" r="2"/><circle cx="16" cy="16" r="2"/></svg>
      </div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>Shipped</h6>
      <p>Package dispatched — tracking number provided.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-icon">
        <svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
      </div>
    </div>
    <div class="sui-timeline-content">
      <h6>Out for Delivery</h6>
      <p>Expected arrival today before 5 PM.</p>
    </div>
  </div>
</div>

Compact

v1.1.0 released

Added Sidebar component with collapsible toggle.

v1.0.8 released

README refresh with banners and badges.

v1.0.7 released

Playground page and progress bar fix.

v1.0.6 released

Navbar improvements and Getting Started page.

v1.0.0 released

Initial public release with 44 components.

<div class="sui-timeline sui-timeline-compact">
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-success"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>v1.1.0 released</h6>
      <p>Added Sidebar component with collapsible toggle.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-success"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>v1.0.8 released</h6>
      <p>README refresh with banners and badges.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-primary"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>v1.0.7 released</h6>
      <p>Playground page and progress bar fix.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot sui-timeline-dot-primary"></div>
      <div class="sui-timeline-connector"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>v1.0.6 released</h6>
      <p>Navbar improvements and Getting Started page.</p>
    </div>
  </div>
  <div class="sui-timeline-item">
    <div class="sui-timeline-separator">
      <div class="sui-timeline-dot"></div>
    </div>
    <div class="sui-timeline-content">
      <h6>v1.0.0 released</h6>
      <p>Initial public release with 44 components.</p>
    </div>
  </div>
</div>