Timeline

2023 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim luctus varius. Quisque lorem arcu, eleifend sed diam ut, ultricies tristique ex. Nam mollis massa sed metus faucibus efficitur.

Pellentesque et sagittis diam. Fusce justo mi, placerat a elit non, viverra venenatis nibh. Suspendisse et finibus velit, ut consectetur ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id auctor tellus.

2022 Nulla facilisi. In hac habitasse platea dictumst. Mauris sed dapibus nunc. Etiam lacinia pharetra mi vitae pulvinar. Ut quis ultricies massa, id malesuada lectus. Donec vel tincidunt quam. Quisque quis aliquet dui. Proin velit elit, faucibus eget ultrices id, sollicitudin eu elit. Maecenas vitae suscipit magna. Fusce non risus lorem. Ut suscipit neque quis eros feugiat fringilla.

2021 Ut scelerisque purus sit amet dolor imperdiet, vitae aliquet dui condimentum. Morbi mattis lobortis neque in tincidunt. Ut consectetur non ante sed convallis. Curabitur ac pulvinar nisl. Morbi sed ligula at neque gravida vulputate at vitae ligula. Morbi ornare maximus elit, sit amet feugiat dolor accumsan id.

Etiam dictum augue sed massa molestie faucibus. Donec eu mi quis metus cursus molestie. Phasellus tristique erat non purus euismod pellentesque. Ut congue eleifend pellentesque. Proin tincidunt velit in nisl sollicitudin imperdiet. Donec sed varius libero. Vivamus et vehicula ligula, sed euismod justo. Sed non nulla ac nibh faucibus commodo.

Timeline

On this page

A simple and highly responsive timeline component based on its parent font size.

Technical Details

  • --size: use this variable to modify the size of the marker on the timeline.
  • --offset: use this to compensate for the marker position related to the line height of the text.

Documentation

Learn about Spruce CSS through our extensive documentation.

Components

Explore our extensive UI library built with Spruce CSS.

Blog

Read about front-end development and concepts of Spruce CSS.

Find us on GitHub

Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.