Timeline React Component

Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.

Timeline React component represents Timeline component.

Usage examples

Vertical Timeline

<Timeline>
  <TimelineItem day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
  <TimelineItem day="22" month="DEC" inner content="Another text goes here"></TimelineItem>
  ...
</Timeline>

Renders to:

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">Some text goes here</div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">Another text goes here</div>
    </div>
  </div>
  ...
</div>

Side By Side

<Timeline sides>
  <TimelineItem day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
  ...
</Timeline>

Renders to:

<div class="timeline timeline-sides">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">Some text goes here</div>
    </div>
  </div>
  ...
</div>

Forced Sides

<Timeline sides>
  <TimelineItem side="right" day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
  ...
  <TimelineItem side="left" day="23" month="DEC" inner content="Just plain text"></TimelineItem>
  ...
</Timeline>

Renders to:

<div class="timeline timeline-sides">
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">Some text goes here</div>
    </div>
  </div>
  ...
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">Just plain text</div>
    </div>
  </div>
  ...
</div>

Rich Content

<Timeline>

  <!-- With Item Elements -->
  <TimelineItem
    day="21"
    month="DEC"
    inner
    time="12:56"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?"
  ></TimelineItem>

  <!-- With List -->
  <TimelineItem
    day="23"
    month="DEC"
  >
    <List inset>
      <ListItem link="#" title="Item 1"></ListItem>
      ...
    </List>
  </TimelineItem>

  <!-- With Card -->
  <TimelineItem
    day="24"
    month="DEC"
  >
    <Card title="Card Header" content="Card Content" footer="Card Footer"></Card>
  </TimelineItem>

</Timeline>

Renders to:

<div class="timeline">

  <!-- With Item Elements -->
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">
        <div class="timeline-item-time">12:56</div>
        <div class="timeline-item-title">Item Title</div>
        <div class="timeline-item-subtitle">Item Subtitle</div>
        <div class="timeline-item-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?
        </div>
      </div>
    </div>
  </div>

  <!-- With List -->
  <div class="timeline-item">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="list-block inset">
        <ul>
          <li>
            <a href="#" class="item-link">
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Item 1</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- With Card -->
  <div class="timeline-item">
    <div class="timeline-item-date">24<small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="card">
        <div class="card-header">Card Header</div>
        <div class="card-content">
          <div class="card-content-inner">
            <div>Card Content</div>
          </div>
        </div>
        <div class="card-footer">Card Footer</div>
      </div>
    </div>
  </div>
</div>

Horizontal Timeline

<Timeline horizontal col="33" tabletCol="20">
  <TimelineItem day="21" month="DEC">
    <TimelineItemChild inner time="12:56" text="Task 1" ></TimelineItemChild>
    <TimelineItemChild inner time="13:15" text="Task 2" ></TimelineItemChild>
    ...
  </TimelineItem>
  <TimelineItem day="22" month="DEC">
    ...
  </TimelineItem>
  ...
</Timeline>

Renders to:

<div class="timeline timeline-horizontal col-33 tablet-20">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">
        <div class="timeline-item-time">12:56</div>
        <div class="timeline-item-text">Task 1</div>
      </div>
      <div class="timeline-item-inner">
        <div class="timeline-item-time">13:15</div>
        <div class="timeline-item-text">Task 2</div>
      </div>
      ...
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-content">
      ...
    </div>
  </div>
  ...
</div>

Calendar Timeline

<Timeline horizontal col="33" tabletCol="15">
  <!-- Year -->
  <TimelineYear title="2016">
    <!-- Month -->
    <TimelineMonth title="November">
      <TimelineItem date="1">...</TimelineItem>
      ...
      <TimelineItem date="30">...</TimelineItem>
    </TimelineMonth>
    <!-- Another Month -->
    <TimelineMonth title="December">
      <TimelineItem date="1">...</TimelineItem>
      ...
      <TimelineItem date="31">...</TimelineItem>
    </TimelineMonth>
  </TimelineYear>

  <!-- Another Year -->
  <TimelineYear title="2017">
    <TimelineMonth title="January">
      <TimelineItem date="1">...</TimelineItem>
      ...
      <TimelineItem date="30">...</TimelineItem>
    </TimelineMonth>
    ...
  </TimelineYear>
  ...
</Timeline>

Renders to:

<div class="timeline timeline-horizontal col-33 tablet-15">
  <!-- Year -->
  <div class="timeline-year">
    <div class="timeline-year-title"><span>2016</span></div>
    <!-- Month -->
    <div class="timeline-month">
      <div class="timeline-month-title"><span>November</span></div>
      <div class="timeline-item">
        <div class="timeline-item-date">1</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">30</div>
        ...
      </div>
    </div>
    <!-- Another Month -->
    <div class="timeline-month">
      <div class="timeline-month-title"><span>December</span></div>
      <div class="timeline-item">
        <div class="timeline-item-date">1</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">31</div>
        ...
      </div>
    </div>
  </div>
  <!-- Another Year -->
  <div class="timeline-year">
    <div class="timeline-year-title"><span>2017</span></div>
    <!-- Month -->
    <div class="timeline-month">
      <div class="timeline-month-title"><span>January</span></div>
      <div class="timeline-item">
        <div class="timeline-item-date">1</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">30</div>
        ...
      </div>
    </div>
    ...
  </div>
</div>

Properties

Prop Type Description
<Timeline> properties
sides boolean Enables Side by Side vertical timeline
tabletSides boolean Enables Side by Side vertical timeline for tablet screens only
horizontal boolean Enables horizontal timeline
col string/number Horizontal timeline column width (in %). According to Layout Grid available columns
tabletCol string/number Horizontal timeline column width (in %) for tabelt screens only. According to Layout Grid available columns
<TimelineYear> properties
title string/number Year title/number
<TimelineMonth> properties
title string/number Month title/number
<TimelineItem> properties
date string/number/date Timeline item date. Can be used instead of day and month props to provide custom date formatting
day string/number Timeline item day
month string/number Timeline item month
inner boolean Adds additional inner wrapping for extra highlighting
side string Forces timeline item side. When Side by Side is enabled
time string Timeline item time
title string Timeline item date
subtitle string Timeline item subtitle
text string Timeline item text
content string Timeline item content. title, subtitle, time, text props will be ignored in case of this prop is used
<TimelineItemChild> properties
inner boolean Adds additional inner wrapping for extra highlighting
time string Timeline item time
title string Timeline item date
subtitle string Timeline item subtitle
text string Timeline item text
content string Timeline item content. title, subtitle, time, text props will be ignored in case of this prop is used