SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
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. Requiredtimeline-item- single timeline item. Requiredtimeline-item-date- timeline item date. Requiredtimeline-item-divider- timeline item decorative divider. Required for vertical timelinetimeline-item-content- timeline item content wrapping. You can put any content here: text, cards, list block, custom HTML or special timeline elements. Requiredtimeline-item-inner- item content additional decorative wrapping. Optionaltimeline-item-time- item time. Optionaltimeline-item-title- item title. Optionaltimeline-item-subtitle- item subtitle. Optionaltimeline-item-text- item text. Optional
Vertical Timeline Example
timeline-vertical.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Vertical 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>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 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>Horizontal Timeline
Horizontal Timeline has the same layout as Vertical but with an additional timeline-horizontal class on main timeline element.
We can also control columns per view in timeline by using Layout Grid columns' classes like timeline-cols-3 and medium-timeline-cols-5 (to define column width for large tablet screens).
timeline-horizontal.html
<div class="page">
<div class="navbar no-shadow">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Horizontal Timeline</div>
</div>
</div>
<div class="page-content">
<div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-5">
<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">13:15</div>
<div class="timeline-item-title">Title 2</div>
<div class="timeline-item-subtitle">Subtitle 2</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 class="timeline-item-inner">
<div class="timeline-item-time">16:11</div>
<div class="timeline-item-text">Do something else</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>
<div class="timeline-item">
<div class="timeline-item-date">23 <small>DEC</small></div>
<div class="timeline-item-content">
<div class="card no-safe-areas">
<div class="card-header">Card</div>
<div class="card-content card-content-padding">Card Content</div>
<div class="card-footer">Card Footer</div>
</div>
<div class="card no-safe-areas">
<div class="card-content card-content-padding">Another Card Content</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">24 <small>DEC</small></div>
<div class="timeline-item-content">
<div class="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>
<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 class="timeline-item-time">13:24</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">14:55</div>
<div class="timeline-item-text">Task 4</div>
<div class="timeline-item-time">15:15</div>
<div class="timeline-item-text">Task 5</div>
<div class="timeline-item-time">16:54</div>
<div class="timeline-item-text">Task 6</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 class="timeline-item-inner">
<div class="timeline-item-time">13:24</div>
<div class="timeline-item-text">Task 3</div>
</div>
<div class="timeline-item-inner">
<div class="timeline-item-time">14:55</div>
<div class="timeline-item-text">Task 4</div>
</div>
<div class="timeline-item-inner">
<div class="timeline-item-time">15:15</div>
<div class="timeline-item-text">Task 5</div>
</div>
<div class="timeline-item-inner">
<div class="timeline-item-time">16:54</div>
<div class="timeline-item-text">Task 6</div>
</div>
</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:
timeline-horizontal-calendar.html
<div class="page">
<div class="navbar no-shadow">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Horizontal Timeline Calendar</div>
</div>
</div>
<div class="page-content">
<div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-6">
<div class="timeline-year">
<div class="timeline-year-title"><span>2016</span></div>
<div class="timeline-month">
<div class="timeline-month-title"><span>December</span></div>
<div class="timeline-item">
<div class="timeline-item-date">20</div>
<div class="timeline-item-content">
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">21</div>
<div class="timeline-item-content">
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">22</div>
<div class="timeline-item-content">
<div class="timeline-item-time">23:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">23</div>
<div class="timeline-item-content">
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">24</div>
<div class="timeline-item-content">
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">25</div>
<div class="timeline-item-content">
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">26</div>
<div class="timeline-item-content">
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">27</div>
<div class="timeline-item-content">
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">28</div>
<div class="timeline-item-content">
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">21:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">29</div>
<div class="timeline-item-content">
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">30</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">7:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">31</div>
<div class="timeline-item-content">
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
</div>
</div>
<div class="timeline-year">
<div class="timeline-year-title"><span>2017</span></div>
<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 class="timeline-item-content">
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">2</div>
<div class="timeline-item-content">
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">3</div>
<div class="timeline-item-content">
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">4</div>
<div class="timeline-item-content">
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">5</div>
<div class="timeline-item-content">
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">6</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2: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 class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">7</div>
<div class="timeline-item-content">
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">8</div>
<div class="timeline-item-content">
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">9</div>
<div class="timeline-item-content">
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">21:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">10</div>
<div class="timeline-item-content">
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">11</div>
<div class="timeline-item-content">
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">12</div>
<div class="timeline-item-content">
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">13</div>
<div class="timeline-item-content">
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">14</div>
<div class="timeline-item-content">
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">15</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">16</div>
<div class="timeline-item-content">
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">17</div>
<div class="timeline-item-content">
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">18</div>
<div class="timeline-item-content">
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">19</div>
<div class="timeline-item-content">
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">20</div>
<div class="timeline-item-content">
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">21</div>
<div class="timeline-item-content">
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">22</div>
<div class="timeline-item-content">
<div class="timeline-item-time">9: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 class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">23</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">24</div>
<div class="timeline-item-content">
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">25</div>
<div class="timeline-item-content">
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">26</div>
<div class="timeline-item-content">
<div class="timeline-item-time">22:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">21:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">27</div>
<div class="timeline-item-content">
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">28</div>
<div class="timeline-item-content">
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">29</div>
<div class="timeline-item-content">
<div class="timeline-item-time">13: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">30</div>
<div class="timeline-item-content">
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">31</div>
<div class="timeline-item-content">
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
</div>
<div class="timeline-month">
<div class="timeline-month-title"><span>February</span></div>
<div class="timeline-item">
<div class="timeline-item-date">1</div>
<div class="timeline-item-content">
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">2</div>
<div class="timeline-item-content">
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">3</div>
<div class="timeline-item-content">
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">4</div>
<div class="timeline-item-content">
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 4</div>
<div class="timeline-item-time">23:00</div>
<div class="timeline-item-text">Task 5</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">5</div>
<div class="timeline-item-content">
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">6</div>
<div class="timeline-item-content">
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">7</div>
<div class="timeline-item-content">
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">8</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">9</div>
<div class="timeline-item-content">
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">22:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">10</div>
<div class="timeline-item-content">
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">8:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">11</div>
<div class="timeline-item-content">
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 4</div>
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 5</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">12</div>
<div class="timeline-item-content">
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">23:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">13</div>
<div class="timeline-item-content">
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">14</div>
<div class="timeline-item-content">
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">15</div>
<div class="timeline-item-content">
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">16</div>
<div class="timeline-item-content">
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">22:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">17</div>
<div class="timeline-item-content">
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">10:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">23:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 4</div>
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 5</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">18</div>
<div class="timeline-item-content">
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">19</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">16:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">12:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">1:00</div>
<div class="timeline-item-text">Task 4</div>
<div class="timeline-item-time">9:00</div>
<div class="timeline-item-text">Task 5</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">20</div>
<div class="timeline-item-content">
<div class="timeline-item-time">19:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">14:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">17:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">21</div>
<div class="timeline-item-content">
<div class="timeline-item-time">4:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">11:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">22</div>
<div class="timeline-item-content">
<div class="timeline-item-time">22:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 3</div>
<div class="timeline-item-time">6:00</div>
<div class="timeline-item-text">Task 4</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">23</div>
<div class="timeline-item-content">
<div class="timeline-item-time">0:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">24</div>
<div class="timeline-item-content">
<div class="timeline-item-time">7:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">25</div>
<div class="timeline-item-content">
<div class="timeline-item-time">5:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">26</div>
<div class="timeline-item-content">
<div class="timeline-item-time">13:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">18:00</div>
<div class="timeline-item-text">Task 2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">27</div>
<div class="timeline-item-content">
<div class="timeline-item-time">2:00</div>
<div class="timeline-item-text">Task 1</div>
<div class="timeline-item-time">20:00</div>
<div class="timeline-item-text">Task 2</div>
<div class="timeline-item-time">3:00</div>
<div class="timeline-item-text">Task 3</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">28</div>
<div class="timeline-item-content">
<div class="timeline-item-time">15:00</div>
<div class="timeline-item-text">Task 1</div>
</div>
</div>
</div>
</div>
</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-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-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: 7px;
--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-year-font-size: 16px;
--f7-timeline-horizontal-item-padding: 10px;
--f7-timeline-item-inner-bg-color: #fff;
--f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
--f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
--f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
}
.ios .dark,
.ios.dark {
--f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
--f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
--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;
--f7-timeline-year-font-size: 16px;
--f7-timeline-horizontal-item-padding: 12px;
--f7-timeline-horizontal-item-date-border-color: transparent;
}
.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-horizontal-item-border-color: var(--f7-md-outline);
--f7-timeline-item-inner-bg-color: var(--f7-md-surface-1);
--f7-timeline-item-time-text-color: var(--f7-md-on-surface-variant);
}