History Timeline
The History Timeline component is designed to visually represent chronological events over a specific period with possibility to add images and text.
The Nestlé company history begins in 1866, with the foundation of the Anglo-Swiss Condensed Milk Company. Henri Nestlé develops a breakthrough baby food in 1867 and in 1905 his company merges with Anglo-Swiss to form what we know as the Nestlé Group.
Period highlights
By 1905, Nestlé & Anglo Swiss has more than 20 factories, and is selling in Africa, Asia, Latin America and Australia. As World War One approaches, the company enjoys the period of prosperity known as the Belle Époque or 'Beautiful Age'. It's now a global dairy company.
Period highlights
The outbreak of war in 1914, creates new challenges and opportunities. The demand for condensed milk and chocolate increases, while a shortage of raw materials and cross-border trade slow down production. To solve these problems, the company acquires processing facilities in the US and Australia. By the end of the war, Nestlé & Anglo-Swiss has 40 factories.
Period highlights
After the war, military demand for milk declines, causing a major crisis for Nestlé & Anglo-Swiss in 1921. The company recovers, but is rocked by the Wall Street Crash, which reduces consumer purchasing power. Despite the downs, the era delivers many positives. The company's management corps is professionalized, research is centralized and pioneering products like Nescafé coffee are launched.
Period highlights
When to use
Use History Timeline component to intensify understanding by providing a clear visual representation with description for period highlights of the sequence of events over time.
You should use this component for any content that can be organized by date.
For example:
- Company history: showcase key milestones, growth phases, and achievements.
- Brand evolution: highlight how a brand has developed over time.
- Year in review: summarize major events, launches, or accomplishments within a specific year.
- Project timelines: outline phases of a project from initiation to completion.
- Event recaps: document the timeline of a conference, campaign, or initiative.
How to use
- Keep it concise. Use short, impactful descriptions for each date or milestone. Focus on the most relevant or transformative events.
- Use consistent date formats. Stick to a consistent format (e.g., Year only, Month + Year, or Full Date) depending on the level of detail needed.
- Maintain chronological order. Start from the earliest date and move forward in time to help users follow the narrative easily.
- Add visuals. Include icons or images to make the timeline more engaging.
- Use for storytelling. Think of the timeline as a storytelling tool - each point should contribute to the bigger picture.
Additional considerations
- Recommended history timeline item year period format and length: 'YYYY' or 'YYYY - YYYY'; maximum 4 or 11 characters
- Recommended history timeline item title length: 10 - 20 characters (max. 25)
- Recommended history timeline item description length: 200 - 300 characters (max. 350)
- Recommended history timeline item period highlights title format and length: 'YYYY' or 'YYYY - YYYY'; maximum 4 or 11 characters
- Recommended history timeline item period highlights description length: 200 - 400 characters (max. 600)
- Recommended image size: 480 x 232 pixels (16 x 9 ratio)
Example
See this component in use:
Travel through our history timeline















