🔥 Black Friday Sale: Up to 50% OFF on UI Initiative, Swiper Studio, PaneFlow and t0ggles🔥
SponsorsBecome a sponsor

Timeline

Framework7 comes with Timeline component that allows to display vertical timeline layouts.

Note: Starting from Framework7 v9, the Horizontal Timeline style has been removed. Only vertical timelines are now supported. Consider using alternative layouts like Grid or Cards for horizontal content presentation.

Vertical Timeline

Common Vertical Timeline layout could be treated as the following:

<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">
        <div class="timeline-item-time">12:30</div>
        <div class="timeline-item-title">Title</div>
        <div class="timeline-item-subtitle">Subtitle</div>
        <div class="timeline-item-text">Text</div>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    ... another timeline item ...
  </div>
</div>

Where

Timeline Example

timeline.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>

        </a>
      </div>
      <div class="title">Timeline</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Default</div>
    <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 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="timeline-item-inner">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 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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Side By Side</div>
    <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 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 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="timeline-item-inner">Just plain text</div>
        </div>
      </div>
      <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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Only Tablet Side By Side</div>
    <div class="timeline medium-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 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 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="timeline-item-inner">Just plain text</div>
        </div>
      </div>
      <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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Forced Sides</div>
    <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-right">
        <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 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 class="timeline-item timeline-item-left">
        <div class="timeline-item-date">24 <small>DEC</small></div>
        <div class="timeline-item-divider"></div>
        <div class="timeline-item-content">
          <div class="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Rich Content</div>
    <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">
            <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 class="timeline-item-time">15:07</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>
      <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">
            <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 class="timeline-item-inner">
            <div class="timeline-item-time">15:07</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>
      <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 card no-safe-areas">
          <div class="card-header">Card Header</div>
          <div class="card-content card-content-padding">Card Content</div>
          <div class="card-footer">Card Footer</div>
        </div>
      </div>
      <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 list links-list inset list-strong list-dividers-ios no-safe-areas">
          <ul>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">25 <small>DEC</small></div>
        <div class="timeline-item-divider"></div>
        <div class="timeline-item-content">Plain text</div>
      </div>
    </div>
    <div class="block-title">Inside Content Block</div>
    <div class="block block-strong">
      <div class="timeline no-safe-areas">
        <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 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="timeline-item-inner">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 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="timeline-item-inner">One more text here</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Timeline Side By Side

There is another "side-by-side" mode available for Vertical Timeline where each next item will be on different side. To enable "side-by-side" mode you need to add timeline-sides class to main timeline element.

It is also possible to enable this mode based on responsive breakpoint. For example, for tablet devices (width >= 786px) we need to add medium-sides class to main timeline element. For full set of such responsive classes check Grid docs. They are xsmall-sides, small-sides, medium-sides, large-sides, xlarge-sides.

To force timeline element to required side we may use additional timeline-item-left and timeline-item-right classes on single timeline item element timeline-item

<!-- Each next item will on different side -->
<div class="block-title">Side By Side</div>
<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 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 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="timeline-item-inner">Just plain text</div>
    </div>
  </div>
  <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="timeline-item-inner">One more text here</div>
    </div>
  </div>
</div>
<!-- Each next item will on different side only on large tablet screens (iPad) -->
<div class="block-title">Only Tablet Side By Side</div>
<div class="timeline medium-sides">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    ...
  </div>
</div>
<!-- Forced sides -->
<div class="block-title">Forced Sides</div>
<div class="timeline timeline-sides">
  <!-- Force to right side by additional "timeline-item-right" class -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to right side by additional "timeline-item-right" class -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to left side by additional "timeline-item-left" class -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to left side by additional "timeline-item-left" class -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    ...
  </div>
</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-timeline-inner-block-margin-vertical: 16px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
}
.ios {
  --f7-timeline-divider-color: #bbb;
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-item-inner-border-radius: 24px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 17px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 15px;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-item-inner-bg-color: #fff;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-item-inner-border-radius: 16px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 16px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 400;
  --f7-timeline-item-subtitle-font-size: inherit;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-line-height: inherit;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-timeline-divider-color: var(--f7-md-outline);
  --f7-timeline-item-text-color: var(--f7-md-on-surface);
  --f7-timeline-item-inner-bg-color: var(--f7-md-surface-1);
  --f7-timeline-item-time-text-color: var(--f7-md-on-surface-variant);
}
Improve this Doc
On this page