Timeline

A convenient way to show a linear progression of dates, times and occurences vertically on a page. Good for showing lists of dates that it is not possible to interact with (as opposed to events, which invite the user to learn more).

Please note that the left side has a fixed width, and using non-breaking text that exceeds this width will visually break the effect.

Timeline

Example:

Monday 24 November 2022

9.00am

VTAC Change of Preference period opens

Monday 22 December 2022

9.00am

Change of Preference period closes

Applies to all VTAC applicants excluding QLD, WA, IB and NZ NCEA Year 12 applicants. Make sure you complete any changes well before the deadline!

Monday 5 January 2023

4.00pm

Change of Preference period closes (QLD, WA, IB and NZ NCEA Year 12 applicants)

Simplified timeline

Example:

1505-10: The Rothschild Prayer Book is produced in the Ghent-Bruges area of the Netherlands. It is probably bought on the market and not commissioned, the original owner is not known.
1872: The Prayer Book appears in a catalogue of the collection of Anselm von Rothschild
1938: It is confiscated by the Nazis from his descendant Alphonse von Rothschild in the annexation of Austria.
After the end of WW2: The Austrian Government uses legislation to pressure the Rothschilds into "donating" a large number of works to Austrian museums, including the Prayer Book

Full-width timeline

Use the full-width class to increase the width of the timeline.

Example:

Monday 24 November 2022

9.00am

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Monday 22 December 2022

9.00am

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum ipsum non sequi tempore cupiditate nobis atque incidunt aliquid quidem nostrum iste amet soluta, reprehenderit blanditiis facere suscipit harum voluptas enim?

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Monday 5 January 2023

4.00pm

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Complex timeline

Example:

Monday 22 December 2022

Lorem ipsum dolor sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quasi corrupti? Labore maiores beatae hic? Repellendus iste provident eius libero! Numquam, odit ea dolorem soluta nihil nemo deserunt sint. Odio.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia fugit vero nobis quis nostrum deserunt porro suscipit repellat fuga magnam culpa non, eum maxime ipsam labore amet minima architecto blanditiis!

Monday 5 January 2023

Lorem ipsum dolor sit, amet

Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
Lorem ipsum dolor sit, amet

Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
Lorem ipsum dolor sit, amet

Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

Monday 22 December 2022