Yearly Timeline Slider
The Yearly Timeline Slider is an interactive content component in which content is displayed by date.
Timeline heading
1990
Timeline title
Timeline description. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2000
Timeline title
Timeline description. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2007
Timeline title
Timeline description. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2013
Timeline title
Timeline description. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2022
Timeline title
Timeline description. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
When to use
This component creates an engaging content experience. It is best used on pages that we intend to be content-rich for our audiences.
You should use this component for any content that can be organised by date. For example:
- Company history
- History of one of our brands
- Year in review
- Commitments we are working towards
How to use
There are various fields within this component:
- Timeline heading: For introductory copy
- For each slider item, you will need:
- Timeline identifier: The year
- Timeline title: An engaging title that depicts the importance of that year.
- Timeline description: The main body text
- Timeline images: 1 to 3 images that are relevant to the year.
Additional considerations
- Recommended heading length: 20 - 50 characters (max. 80)
- Recommended timeline identified format: YYYY
- Recommended item title length: 15 - 60 characters (max. 80)
- Recommended item description length: 300 - 550 characters (max. 700)
- Recommended image sizes:
- Main image: 465 x 582 pixels (3:4 ratio)
- Image 2: 130 x 130 pixels (1:1 ratio)
- Image 3: 130 x 130 pixels (1:1 ratio)
Examples
See this component in use:
Nescafé brand page
Nespresso brand page
