v4
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop

Timeline

Framework7 comes with Timeline component that allows to display both Vertical & Horizontal timeline layouts.

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 - main timeline wrapping element. Required
    • timeline-item - single timeline item. Required
      • timeline-item-date - timeline item date. Required
      • timeline-item-divider - timeline item decorative divider. Required for vertical timeline
      • timeline-item-content - timeline item content wrapping. You can put any content here: text, cards, list block, custom HTML or special temeline elements. Required
        • timeline-item-inner - item content additional decorative wrapping. Optional
        • timeline-item-time - item time. Optional
        • timeline-item-title - item title. Optional
        • timeline-item-subtitle - item subtitle. Optional
        • timeline-item-text - item text. Optional

Vertical Timeline Example

<!-- Timeline -->
<div class="timeline">
  <!-- Timeline item -->
  <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">Plain text item</div>
  </div>
  <!-- Timeline item with inner -->
  <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>
  <!-- Timeline item with special timeline elements -->
  <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-time">12:33</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
    </div>
  </div>
  <!-- Timeline item with special timeline elements and inner -->
  <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">
        <div class="timeline-item-time">12:33</div>
        ...
      </div>
    </div>
  </div>
  <!-- Timeline item with multiple events per day  -->
  <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">
      <div class="timeline-item-time">12:33</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
      <div class="timeline-item-time">15:45</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
    </div>
  </div>
  <!-- Timeline item with multiple events (inners) per day -->
  <div class="timeline-item">
    <div class="timeline-item-date">26 <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:33</div>
        ...
      </div>
      <div class="timeline-item-inner">
        <div class="timeline-item-time">15:45</div>
        ...
      </div>
    </div>
  </div>
  <!-- Timeline item with Card -->
  <div class="timeline-item">
    <div class="timeline-item-date">27 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content card">
      <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>

Vertical 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 only for tablet devices by adding tablet-sides class to main timeline element.

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 tablet-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>

Horizontal Timeline

Horizontal Timeline has the same layout as Vertical but witha addional timeline-horizontal class on main timeline element.

We can also control columns per view in timeline by using Layout Grid columns' classes like col-33 and tablet-20 (to define column width for large tablet screens).

<!--
Additional "timeline-horizontal" class to enable Horizontal timeline
Additional "col-50" to define column width (50%)
Additional "tablet-20" to define column width for tablets (20%)
-->
<div class="timeline timeline-horizontal col-50 tablet-20">
  <!-- Timeline Item (Day) -->
  <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-title">Title 1</div>
        <div class="timeline-item-subtitle">Subtitle 1</div>
        <div class="timeline-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
      </div>
      ...
      <div class="timeline-item-inner">
        <div class="timeline-item-time">14:45</div>
        <div class="timeline-item-text">Do something</div>
      </div>
      ...
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    <div class="timeline-item-content">Plain text goes here</div>
  </div>
  <!-- Timeline Item With Card -->
  <div class="timeline-item">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    <div class="timeline-item-content">
      <div class="card">
        ...
      </div>
      ...
    </div>
  </div>
  <!-- Timeline Item With List Block -->
  <div class="timeline-item">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    <div class="timeline-item-content">
      <div class="list inset">
        <ul>
          ...
        </ul>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">25 <small>DEC</small></div>
    <div class="timeline-item-content">
      <div class="timeline-item-time">11:11</div>
      <div class="timeline-item-text">Task 1</div>
      <div class="timeline-item-time">12:33</div>
      <div class="timeline-item-text">Task 2</div>
      ...
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">26 <small>DEC</small></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">
        <div class="timeline-item-time">11:11</div>
        <div class="timeline-item-text">Task 1</div>
      </div>
      <div class="timeline-item-inner">
        <div class="timeline-item-time">12:33</div>
        <div class="timeline-item-text">Task 2</div>
      </div>
      ...
    </div>
  </div>
</div>

Calendar Timeline

Calendar Timeline has almost the same layout as Horizontal but with additional Year and Month wrapping elements, so the structure should be the following:

<div class="timeline timeline-horizontal">
  <!-- Timeline Year -->
  <div class="timeline-year">
    <!-- Year Title -->
    <div class="timeline-year-title"><span>2016</span></div>
    <!-- Month -->
    <div class="timeline-month">
      <!-- Month Title -->
      <div class="timeline-month-title"><span>January</span></div>
      <!-- Items -->
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
    </div>
    <!-- Another Month -->
    <div class="timeline-month">
      <!-- Month Title -->
      <div class="timeline-month-title"><span>February</span></div>
      <!-- Items -->
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
    </div>
    ...
  </div>
  <!-- Timeline Another Year -->
  <div class="timeline-year">
    <div class="timeline-year-title"><span>2017</span></div>
    <!-- Months -->
    <div class="timeline-month">...</div>
    <div class="timeline-month">...</div>
    ...
  </div>
</div>
<!--
Additional "timeline-horizontal" class to enable Horizontal timeline
Additional "col-33" to define column width (33%)
Additional "tablet-20" to define column width for tablets (20%)
-->
<div class="timeline timeline-horizontal col-33 tablet-15">
  <!-- Timeline Year -->
  <div class="timeline-year">
    <!-- Timeline Year Title -->
    <div class="timeline-year-title"><span>2016</span></div>
    <!-- Timeline Month -->
    <div class="timeline-month">
      <!-- Timeline Month Title -->
      <div class="timeline-month-title"><span>December</span></div>
      <!-- Timeline Month Items -->
      <div class="timeline-item">
        <div class="timeline-item-date">20</div>
        <div class="timeline-item-content">
          <div class="timeline-item-time">21:00</div>
          <div class="timeline-item-text">Task 1</div>
          <div class="timeline-item-time">5:00</div>
          <div class="timeline-item-text">Task 2</div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">21</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">31</div>
        ...
      </div>
    </div>
  </div>
  <!-- Timeline Year -->
  <div class="timeline-year">
    <!-- Timeline Year Title -->
    <div class="timeline-year-title"><span>2017</span></div>
    <!-- Timeline Month -->
    <div class="timeline-month">
      <!-- Timeline Month Title -->
      <div class="timeline-month-title"><span>January</span></div>
      <!-- Timeline Month Items -->
      <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>
    <!-- Timeline Month -->
    <div class="timeline-month">
      <!-- Timeline Month Title -->
      <div class="timeline-month-title"><span>February</span></div>
      <!-- Timeline Month Items -->
      <div class="timeline-item">
        <div class="timeline-item-date">1</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">28</div>
        ...
      </div>
    </div>
  </div>
</div>

CSS Variables

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

:root {
  --f7-timeline-horizontal-date-height: 34px;
  --f7-timeline-year-height: 24px;
  --f7-timeline-year-font-weight: inherit;
  --f7-timeline-month-height: 24px;
  --f7-timeline-month-font-size: inherit;
  --f7-timeline-month-font-weight: inherit;
  --f7-timeline-item-inner-bg-color: #fff;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
}
:root .theme-dark,
:root.theme-dark {
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-horizontal-item-border-color: #282829;
  --f7-timeline-horizontal-item-date-border-color: #282829;
}
.ios {
  --f7-timeline-padding-horizontal: 15px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-divider-margin-horizontal: 15px;
  --f7-timeline-inner-block-margin-vertical: 15px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-inner-box-shadow: none;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-time-text-color: #6d6d72;
  --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-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-horizontal-item-border-color: #c4c4c4;
  --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
  --f7-timeline-horizontal-item-date-shadow-image: none;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-timeline-item-time-text-color: #8E8E93;
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-inner-block-margin-vertical: 16px;
  --f7-timeline-item-inner-border-radius: 4px;
  --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  --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;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  --f7-timeline-horizontal-item-date-border-color: transparent;
  --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
}
.md .theme-dark,
.md.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-timeline-padding-horizontal: 10px;
  --f7-timeline-margin-vertical: 15px;
  --f7-timeline-divider-margin-horizontal: 15px;
  --f7-timeline-inner-block-margin-vertical: 15px;
  --f7-timeline-item-inner-border-radius: 4px;
  --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  --f7-timeline-item-time-font-size: 12px;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  --f7-timeline-item-title-font-size: 14px;
  --f7-timeline-item-title-line-height: 1.3;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 14px;
  --f7-timeline-item-subtitle-line-height: 1.3;
  --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  --f7-timeline-item-text-font-size: 12px;
  --f7-timeline-item-text-line-height: 1.33;
  --f7-timeline-year-font-size: 14px;
  --f7-timeline-year-font-weight: 500;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-shadow-image: none;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
  --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
}