Timeline

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:

1. <div class="timeline">
2. <div class="timeline-item">
3. <div class="timeline-item-date">21 <small>DEC</small></div>
4. <div class="timeline-item-divider"></div>
5. <div class="timeline-item-content">
6. <div class="timeline-item-inner">
7. <div class="timeline-item-time">12:30</div>
8. <div class="timeline-item-title">Title</div>
9. <div class="timeline-item-subtitle">Subtitle</div>
10. <div class="timeline-item-text">Text</div>
11. </div>
12. </div>
13. </div>
14. <div class="timeline-item">
15. ... another timeline item ...
16. </div>
17. </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

1. <!-- Timeline -->
2. <div class="timeline">
3. <!-- Timeline item -->
4. <div class="timeline-item">
5. <div class="timeline-item-date">21 <small>DEC</small></div>
6. <div class="timeline-item-divider"></div>
7. <div class="timeline-item-content">Plain text item</div>
8. </div>
9. <!-- Timeline item with inner -->
10. <div class="timeline-item">
11. <div class="timeline-item-date">22 <small>DEC</small></div>
12. <div class="timeline-item-divider"></div>
13. <div class="timeline-item-content">
14. <div class="timeline-item-inner">Another text goes here</div>
15. </div>
16. </div>
17. <!-- Timeline item with special timeline elements -->
18. <div class="timeline-item">
19. <div class="timeline-item-date">23 <small>DEC</small></div>
20. <div class="timeline-item-divider"></div>
21. <div class="timeline-item-content">
22. <div class="timeline-item-time">12:33</div>
23. <div class="timeline-item-title">Item Title</div>
24. <div class="timeline-item-subtitle">Item Subtitle</div>
25. <div class="timeline-item-text">Item Text</div>
26. </div>
27. </div>
28. <!-- Timeline item with special timeline elements and inner -->
29. <div class="timeline-item">
30. <div class="timeline-item-date">24 <small>DEC</small></div>
31. <div class="timeline-item-divider"></div>
32. <div class="timeline-item-content">
33. <div class="timeline-item-inner">
34. <div class="timeline-item-time">12:33</div>
35. ...
36. </div>
37. </div>
38. </div>
39. <!-- Timeline item with multiple events per day  -->
40. <div class="timeline-item">
41. <div class="timeline-item-date">25 <small>DEC</small></div>
42. <div class="timeline-item-divider"></div>
43. <div class="timeline-item-content">
44. <div class="timeline-item-time">12:33</div>
45. <div class="timeline-item-title">Item Title</div>
46. <div class="timeline-item-subtitle">Item Subtitle</div>
47. <div class="timeline-item-text">Item Text</div>
48. <div class="timeline-item-time">15:45</div>
49. <div class="timeline-item-title">Item Title</div>
50. <div class="timeline-item-subtitle">Item Subtitle</div>
51. <div class="timeline-item-text">Item Text</div>
52. </div>
53. </div>
54. <!-- Timeline item with multiple events (inners) per day -->
55. <div class="timeline-item">
56. <div class="timeline-item-date">26 <small>DEC</small></div>
57. <div class="timeline-item-divider"></div>
58. <div class="timeline-item-content">
59. <div class="timeline-item-inner">
60. <div class="timeline-item-time">12:33</div>
61. ...
62. </div>
63. <div class="timeline-item-inner">
64. <div class="timeline-item-time">15:45</div>
65. ...
66. </div>
67. </div>
68. </div>
69. <!-- Timeline item with Card -->
70. <div class="timeline-item">
71. <div class="timeline-item-date">27 <small>DEC</small></div>
72. <div class="timeline-item-divider"></div>
73. <div class="timeline-item-content card">
74. <div class="card-header">Card header</div>
75. <div class="card-content card-content-padding">Card content</div>
76. <div class="card-footer">Card footer</div>
77. </div>
78. </div>
79. </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

1. <!-- Each next item will on different side -->
2. <div class="block-title">Side By Side</div>
3. <div class="timeline timeline-sides">
4. <div class="timeline-item">
5. <div class="timeline-item-date">21 <small>DEC</small></div>
6. <div class="timeline-item-divider"></div>
7. <div class="timeline-item-content">
8. <div class="timeline-item-inner">Some text goes here</div>
9. </div>
10. </div>
11. <div class="timeline-item">
12. <div class="timeline-item-date">22 <small>DEC</small></div>
13. <div class="timeline-item-divider"></div>
14. <div class="timeline-item-content">
15. <div class="timeline-item-inner">Another text goes here</div>
16. </div>
17. </div>
18. <div class="timeline-item">
19. <div class="timeline-item-date">23 <small>DEC</small></div>
20. <div class="timeline-item-divider"></div>
21. <div class="timeline-item-content">
22. <div class="timeline-item-inner">Just plain text</div>
23. </div>
24. </div>
25. <div class="timeline-item">
26. <div class="timeline-item-date">24 <small>DEC</small></div>
27. <div class="timeline-item-divider"></div>
28. <div class="timeline-item-content">
29. <div class="timeline-item-inner">One more text here</div>
30. </div>
31. </div>
32. </div>
33. <!-- Each next item will on different side only on large tablet screens (iPad) -->
34. <div class="block-title">Only Tablet Side By Side</div>
35. <div class="timeline medium-sides">
36. <div class="timeline-item">
37. <div class="timeline-item-date">21 <small>DEC</small></div>
38. ...
39. </div>
40. <div class="timeline-item">
41. <div class="timeline-item-date">22 <small>DEC</small></div>
42. ...
43. </div>
44. <div class="timeline-item">
45. <div class="timeline-item-date">23 <small>DEC</small></div>
46. ...
47. </div>
48. <div class="timeline-item">
49. <div class="timeline-item-date">24 <small>DEC</small></div>
50. ...
51. </div>
52. </div>
53. <!-- Forced sides -->
54. <div class="block-title">Forced Sides</div>
55. <div class="timeline timeline-sides">
56. <!-- Force to right side by additional "timeline-item-right" class -->
57. <div class="timeline-item timeline-item-right">
58. <div class="timeline-item-date">21 <small>DEC</small></div>
59. ...
60. </div>
61. <!-- Force to right side by additional "timeline-item-right" class -->
62. <div class="timeline-item timeline-item-right">
63. <div class="timeline-item-date">22 <small>DEC</small></div>
64. ...
65. </div>
66. <!-- Force to left side by additional "timeline-item-left" class -->
67. <div class="timeline-item timeline-item-left">
68. <div class="timeline-item-date">23 <small>DEC</small></div>
69. ...
70. </div>
71. <!-- Force to left side by additional "timeline-item-left" class -->
72. <div class="timeline-item timeline-item-left">
73. <div class="timeline-item-date">24 <small>DEC</small></div>
74. ...
75. </div>
76. </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).

1. <!--
2. Additional "timeline-horizontal" class to enable Horizontal timeline
3. Additional "col-50" to define column width (50%)
4. Additional "tablet-20" to define column width for tablets (20%)
5. -->
6. <div class="timeline timeline-horizontal col-50 tablet-20">
7. <!-- Timeline Item (Day) -->
8. <div class="timeline-item">
9. <div class="timeline-item-date">21 <small>DEC</small></div>
10. <div class="timeline-item-content">
11. <div class="timeline-item-inner">
12. <div class="timeline-item-time">12:56</div>
13. <div class="timeline-item-title">Title 1</div>
14. <div class="timeline-item-subtitle">Subtitle 1</div>
15. <div class="timeline-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
16. </div>
17. ...
18. <div class="timeline-item-inner">
19. <div class="timeline-item-time">14:45</div>
20. <div class="timeline-item-text">Do something</div>
21. </div>
22. ...
23. </div>
24. </div>
25. <div class="timeline-item">
26. <div class="timeline-item-date">22 <small>DEC</small></div>
27. <div class="timeline-item-content">Plain text goes here</div>
28. </div>
29. <!-- Timeline Item With Card -->
30. <div class="timeline-item">
31. <div class="timeline-item-date">23 <small>DEC</small></div>
32. <div class="timeline-item-content">
33. <div class="card">
34. ...
35. </div>
36. ...
37. </div>
38. </div>
39. <!-- Timeline Item With List Block -->
40. <div class="timeline-item">
41. <div class="timeline-item-date">24 <small>DEC</small></div>
42. <div class="timeline-item-content">
43. <div class="list inset">
44. <ul>
45. ...
46. </ul>
47. </div>
48. </div>
49. </div>
50. <div class="timeline-item">
51. <div class="timeline-item-date">25 <small>DEC</small></div>
52. <div class="timeline-item-content">
53. <div class="timeline-item-time">11:11</div>
54. <div class="timeline-item-text">Task 1</div>
55. <div class="timeline-item-time">12:33</div>
56. <div class="timeline-item-text">Task 2</div>
57. ...
58. </div>
59. </div>
60. <div class="timeline-item">
61. <div class="timeline-item-date">26 <small>DEC</small></div>
62. <div class="timeline-item-content">
63. <div class="timeline-item-inner">
64. <div class="timeline-item-time">11:11</div>
65. <div class="timeline-item-text">Task 1</div>
66. </div>
67. <div class="timeline-item-inner">
68. <div class="timeline-item-time">12:33</div>
69. <div class="timeline-item-text">Task 2</div>
70. </div>
71. ...
72. </div>
73. </div>
74. </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:

1. <div class="timeline timeline-horizontal">
2. <!-- Timeline Year -->
3. <div class="timeline-year">
4. <!-- Year Title -->
5. <div class="timeline-year-title"><span>2016</span></div>
6. <!-- Month -->
7. <div class="timeline-month">
8. <!-- Month Title -->
9. <div class="timeline-month-title"><span>January</span></div>
10. <!-- Items -->
11. <div class="timeline-item">...</div>
12. <div class="timeline-item">...</div>
13. <div class="timeline-item">...</div>
14. <div class="timeline-item">...</div>
15. </div>
16. <!-- Another Month -->
17. <div class="timeline-month">
18. <!-- Month Title -->
19. <div class="timeline-month-title"><span>February</span></div>
20. <!-- Items -->
21. <div class="timeline-item">...</div>
22. <div class="timeline-item">...</div>
23. <div class="timeline-item">...</div>
24. <div class="timeline-item">...</div>
25. </div>
26. ...
27. </div>
28. <!-- Timeline Another Year -->
29. <div class="timeline-year">
30. <div class="timeline-year-title"><span>2017</span></div>
31. <!-- Months -->
32. <div class="timeline-month">...</div>
33. <div class="timeline-month">...</div>
34. ...
35. </div>
36. </div>

1. <!--
2. Additional "timeline-horizontal" class to enable Horizontal timeline
3. Additional "col-33" to define column width (33%)
4. Additional "tablet-20" to define column width for tablets (20%)
5. -->
6. <div class="timeline timeline-horizontal col-33 tablet-15">
7. <!-- Timeline Year -->
8. <div class="timeline-year">
9. <!-- Timeline Year Title -->
10. <div class="timeline-year-title"><span>2016</span></div>
11. <!-- Timeline Month -->
12. <div class="timeline-month">
13. <!-- Timeline Month Title -->
14. <div class="timeline-month-title"><span>December</span></div>
15. <!-- Timeline Month Items -->
16. <div class="timeline-item">
17. <div class="timeline-item-date">20</div>
18. <div class="timeline-item-content">
19. <div class="timeline-item-time">21:00</div>
20. <div class="timeline-item-text">Task 1</div>
21. <div class="timeline-item-time">5:00</div>
22. <div class="timeline-item-text">Task 2</div>
23. </div>
24. </div>
25. <div class="timeline-item">
26. <div class="timeline-item-date">21</div>
27. ...
28. </div>
29. ...
30. <div class="timeline-item">
31. <div class="timeline-item-date">31</div>
32. ...
33. </div>
34. </div>
35. </div>
36. <!-- Timeline Year -->
37. <div class="timeline-year">
38. <!-- Timeline Year Title -->
39. <div class="timeline-year-title"><span>2017</span></div>
40. <!-- Timeline Month -->
41. <div class="timeline-month">
42. <!-- Timeline Month Title -->
43. <div class="timeline-month-title"><span>January</span></div>
44. <!-- Timeline Month Items -->
45. <div class="timeline-item">
46. <div class="timeline-item-date">1</div>
47. ...
48. </div>
49. ...
50. <div class="timeline-item">
51. <div class="timeline-item-date">31</div>
52. ...
53. </div>
54. </div>
55. <!-- Timeline Month -->
56. <div class="timeline-month">
57. <!-- Timeline Month Title -->
58. <div class="timeline-month-title"><span>February</span></div>
59. <!-- Timeline Month Items -->
60. <div class="timeline-item">
61. <div class="timeline-item-date">1</div>
62. ...
63. </div>
64. ...
65. <div class="timeline-item">
66. <div class="timeline-item-date">28</div>
67. ...
68. </div>
69. </div>
70. </div>
71. </div>

CSS Variables

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

1. :root {
2. --f7-timeline-inner-block-margin-vertical: 16px;
3. --f7-timeline-divider-margin-horizontal: 16px;
4. --f7-timeline-horizontal-date-height: 34px;
5. --f7-timeline-year-height: 24px;
6. --f7-timeline-year-font-weight: inherit;
7. --f7-timeline-month-height: 24px;
8. --f7-timeline-month-font-size: inherit;
9. --f7-timeline-month-font-weight: inherit;
10. --f7-timeline-item-text-font-weight: inherit;
11. --f7-timeline-item-subtitle-font-weight: inherit;
12. --f7-timeline-item-inner-bg-color: #fff;
13. }
14. :root .theme-dark,
15. :root.theme-dark {
16. --f7-timeline-item-inner-bg-color: #1c1c1d;
17. --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
18. --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
19. }
20. .ios {
21. --f7-timeline-padding-horizontal: 16px;
22. --f7-timeline-margin-vertical: 35px;
23. --f7-timeline-item-inner-border-radius: 7px;
24. --f7-timeline-item-inner-box-shadow: none;
25. --f7-timeline-item-time-font-size: 13px;
26. --f7-timeline-item-title-font-size: 17px;
27. --f7-timeline-item-title-line-height: inherit;
28. --f7-timeline-item-title-font-weight: 600;
29. --f7-timeline-item-subtitle-font-size: 15px;
30. --f7-timeline-item-subtitle-line-height: inherit;
31. --f7-timeline-item-text-font-size: inherit;
32. --f7-timeline-item-text-color: inherit;
33. --f7-timeline-item-text-line-height: inherit;
34. --f7-timeline-year-font-size: 16px;
35. --f7-timeline-horizontal-item-padding: 10px;
36. --f7-timeline-horizontal-item-date-shadow-image: none;
37. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
38. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
39. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
40. }
41. .ios .theme-dark,
42. .ios.theme-dark {
43. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
44. }
45. .md {
46. --f7-timeline-padding-horizontal: 16px;
47. --f7-timeline-margin-vertical: 32px;
48. --f7-timeline-item-inner-border-radius: 4px;
49. --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
50. --f7-timeline-item-time-font-size: 13px;
51. --f7-timeline-item-title-font-size: 16px;
52. --f7-timeline-item-title-line-height: inherit;
53. --f7-timeline-item-title-font-weight: 400;
54. --f7-timeline-item-subtitle-font-size: inherit;
55. --f7-timeline-item-subtitle-line-height: inherit;
56. --f7-timeline-item-text-font-size: inherit;
57. --f7-timeline-item-text-line-height: inherit;
58. --f7-timeline-item-text-color: inherit;
59. --f7-timeline-year-font-size: 16px;
60. --f7-timeline-horizontal-item-padding: 12px;
61. --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
62. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
63. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
64. --f7-timeline-horizontal-item-date-border-color: transparent;
65. }
66. .md .theme-dark,
67. .md.theme-dark {
68. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
69. }
70. .aurora {
71. --f7-timeline-padding-horizontal: 10px;
72. --f7-timeline-margin-vertical: 15px;
73. --f7-timeline-item-inner-border-radius: 4px;
74. --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
75. --f7-timeline-item-time-font-size: 12px;
76. --f7-timeline-item-title-font-size: 14px;
77. --f7-timeline-item-title-line-height: 1.3;
78. --f7-timeline-item-title-font-weight: 600;
79. --f7-timeline-item-subtitle-font-size: 14px;
80. --f7-timeline-item-subtitle-line-height: 1.3;
81. --f7-timeline-item-text-font-size: 12px;
82. --f7-timeline-item-text-line-height: 1.33;
83. --f7-timeline-year-font-size: 14px;
84. --f7-timeline-year-font-weight: 500;
85. --f7-timeline-horizontal-item-padding: 10px;
86. --f7-timeline-horizontal-item-date-shadow-image: none;
87. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
88. --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
89. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
90. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
91. }
92. .aurora .theme-dark,
93. .aurora.theme-dark {
94. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
95. --f7-timeline-item-text-color: rgba(255, 255, 255, 0.54);
96. }

← Text Editor

Toast →