Timelines - Experimentals - Spectre.css CSS Framework
Author: Yan Zhu
Description: The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Timelines#

The Timelines are ordered sequences of activities.

March 2016

Initial commit

February 2017

New Documents experience

Bars: represent the progress of a task

Steps: progress indicators of a sequence of task steps

Tiles: repeatable or embeddable information blocks

March 2017

Icons: single-element, responsive and pure CSS icons

Popovers: small overlay content containers

Calendars: date or date range picker and events display

Carousels: slideshows for cycling images

    <div class="timeline">
      <div class="timeline-item" id="timeline-example-1">
        <div class="timeline-left">
          <a class="timeline-icon" href="#timeline-example-1"></a>
        </div>
        <div class="timeline-content">
          <!-- tiles structure -->
        </div>
      </div>

      <div class="timeline-item" id="timeline-example-2">
        <div class="timeline-left">
          <a class="timeline-icon icon-lg" href="#timeline-example-2">
            <i class="icon icon-check"></i>
          </a>
        </div>
        <div class="timeline-content">
          <!-- tiles structure -->
        </div>
      </div>
      ...
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.