Vertical (default) layout.
Designed to sit in a 'container' element.
-
1978
-
January
This is an event title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
August
Another event title
Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.
-
-
1982
-
Something else happened
Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio.
-
-
1990
-
March
Event title
Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
July
An historic moment
Quisque rutrum enim pharetra magna tristique, convallis accumsan nisl iaculis. Sed erat enim, viverra in tincidunt vel, ultricies ac ligula.
-
November
Milestone event
Ut varius dapibus aliquet. Donec euismod tristique augue, et mollis mauris fermentum a. Maecenas venenatis consequat dolor eu aliquam.
-
-
1996
-
Another event
Proin nisi nulla, suscipit at enim a, varius bibendum magna. Maecenas ut volutpat metus. Fusce nec malesuada tellus, vitae bibendum erat. Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus.
-
-
2000
-
Important moment
Suspendisse id lacinia turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Aliquam quis efficitur tortor.
-
-
2006
-
April
A major development
Fusce bibendum tristique mollis. Integer vel suscipit mauris. Proin semper lobortis augue, a dapibus ex posuere et.
-
August
Adversity strikes
Sed id nibh convallis, sodales orci at, maximus turpis. Nulla neque dolor, vestibulum eu pulvinar non, vulputate in ex. Phasellus bibendum maximus ipsum at venenatis.
-
-
2012
-
A major change
Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus. Proin nisi nulla, suscipit at enim a, varius bibendum magna.
-
-
2023
-
Latest development
Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Mauris mauris est, dignissim ut leo es.
-
Vertical layout with centre line ('timeline--centred' modifier class + 'lg' or higher breakpoint).
-
1978
-
January
This is an event title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
August
Another event title
Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.
-
-
1982
-
Something else happened
Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio.
-
-
1990
-
March
Event title
Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
July
An historic moment
Quisque rutrum enim pharetra magna tristique, convallis accumsan nisl iaculis. Sed erat enim, viverra in tincidunt vel, ultricies ac ligula.
-
November
Milestone event
Ut varius dapibus aliquet. Donec euismod tristique augue, et mollis mauris fermentum a. Maecenas venenatis consequat dolor eu aliquam.
-
-
1996
-
Another event
Proin nisi nulla, suscipit at enim a, varius bibendum magna. Maecenas ut volutpat metus. Fusce nec malesuada tellus, vitae bibendum erat. Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus.
-
-
2000
-
Important moment
Suspendisse id lacinia turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Aliquam quis efficitur tortor.
-
-
2006
-
April
A major development
Fusce bibendum tristique mollis. Integer vel suscipit mauris. Proin semper lobortis augue, a dapibus ex posuere et.
-
August
Adversity strikes
Sed id nibh convallis, sodales orci at, maximus turpis. Nulla neque dolor, vestibulum eu pulvinar non, vulputate in ex. Phasellus bibendum maximus ipsum at venenatis.
-
-
2012
-
A major change
Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus. Proin nisi nulla, suscipit at enim a, varius bibendum magna.
-
-
2023
-
Latest development
Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Mauris mauris est, dignissim ut leo es.
-
Horizontal layout ('timeline--horizontal' modifier class + 'lg' or higher breakpoint).
Designed to sit in a full-width section of a web page (edge-padding built-in).
-
1978
-
January
This is an event title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
August
Another event title
Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.
-
-
1982
-
Something else happened
Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio.
-
-
1990
-
March
Event title
Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.
-
July
An historic moment
Quisque rutrum enim pharetra magna tristique, convallis accumsan nisl iaculis. Sed erat enim, viverra in tincidunt vel, ultricies ac ligula.
-
November
Milestone event
Ut varius dapibus aliquet. Donec euismod tristique augue, et mollis mauris fermentum a. Maecenas venenatis consequat dolor eu aliquam.
-
-
1996
-
Another event
Proin nisi nulla, suscipit at enim a, varius bibendum magna. Maecenas ut volutpat metus. Fusce nec malesuada tellus, vitae bibendum erat. Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus.
-
-
2000
-
Important moment
Suspendisse id lacinia turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Aliquam quis efficitur tortor.
-
-
2006
-
April
A major development
Fusce bibendum tristique mollis. Integer vel suscipit mauris. Proin semper lobortis augue, a dapibus ex posuere et.
-
August
Adversity strikes
Sed id nibh convallis, sodales orci at, maximus turpis. Nulla neque dolor, vestibulum eu pulvinar non, vulputate in ex. Phasellus bibendum maximus ipsum at venenatis.
-
-
2012
-
A major change
Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacus. Proin nisi nulla, suscipit at enim a, varius bibendum magna.
-
-
2023
-
Latest development
Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Mauris mauris est, dignissim ut leo es.
-