Timeline
A timeline UI component which allows up to six chronological events to be displayed
How to use
- Optionally add Quick-Nav Text to be picked up by the Quick Navigation Bar/Progress Navigation Bar
- Add a title for the entire timeline
- Optionally choose a colour for the line: black, grey, orange, pink, purple, light purple, red, teal or yellow (defaults to grey)
- Optionally choose a colour for (the border of) each dot: black, grey, orange, pink, purple, light purple, red, teal or yellow (defaults to pink)
- Optionally choose a colour for the dotted connector of each dot: black, grey, orange, pink, purple, light purple, red, teal or yellow (defaults to black)
- Add a title for each timeline entry
- Add a description for each timeline entry
Content Type Details
ID: 562
Name: Timeline
Description: Creates a timeline UI component for up to 6 chronological events
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name element | 80 Characters | Plain Text | Yes |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 80 Characters | Plain Text | No |
| Title | Main title of the whole timeline | 80 Characters | Plain Text | Yes |
| Timeline colour | Colour of the line itself | N/A | Select Box (List: Timeline Colours) | No |
| Timeline dot colour | Colour of the border on each timeline dot | N/A | Select Box (List: Timeline Colours) | No |
| Timeline connector colour | Colour of the dotted connector line (connects dot to each timeline entry) | N/A | Select Box (List: Timeline Colours) | No |
| Entry 1 title | Title of the first/earliest timeline entry | 80 Characters | Plain Text | Yes |
| Entry 1 description | Description/subtitle of the first timeline entry | 200 Characters | Plain Text | Yes |
| Entry 2 title | Title of the second timeline entry | 80 Characters | Plain Text | Yes |
| Entry 2 description | Description/subtitle of second timeline entry | 200 Characters | Plain Text | Yes |
| Entry 3 title | Title of the third timeline entry | 80 Characters | Plain Text | No |
| Entry 3 description | Description/subtitle of third timeline entry | 200 Characters | Plain Text | No |
| Entry 4 title | Title of the fourth timeline entry | 80 Characters | Plain Text | No |
| Entry 4 description | Description/subtitle of fourth timeline entry | 200 Characters | Plain Text | No |
| Entry 5 title | Title of the fifth timeline entry | 80 Characters | Plain Text | No |
| Entry 5 description | Description/subtitle of fifth timeline entry | 200 Characters | Plain Text | No |
| Entry 6 title | Title of the sixth timeline entry | 80 Characters | Plain Text | No |
| Entry 6 description | Description/subtitle of sixth timeline entry | 200 Characters | Plain Text | No |
Examples
Three items
-
Start
Start entry on the timeline
-
Middle
Middle entry on the timeline. Middle entry on the timeline.
-
End
End entry on the timeline. End entry on the timeline. End entry on the timeline
Clearing
-
30 June
UCAS applications close
-
4 July
UCAS Extra close
-
5 July
Clearing opens
-
15 August
A level results
First six months of the year
-
January
First month of the year. First month of the year.
-
February
Second month of the year
-
March
Third month of the year. Third month of the year. Third month of the year. Third month of the year.
-
April
Fourth month of the year. Fourth month of the year. Fourth month of the year.
-
May
Fifth month of the year
-
June
Sixth month of the year. Sixth month of the year.