Timelines are a popular design choice for all kinds of websites, but Squarespace doesn’t have that feature built into their program.

Luckily, this tutorial will teach you how to make your own using a list section in Squarespace 7.1 and a little bit of custom CSS!

In this Squarespace tutorial, you’ll learn how to turn a list section into a horizontal timeline.

• We’ll add the section and our content, then use the list section settings to adjust the size and padding of the list cards.

• After that, I’ll show you two unique codes that you can use to turn your list cards into different shapes that point to the next event and to a timeline.

Here are the codes from this tutorial:

Be sure to change the borders and custom colors to match your site style!

Create left arrow shapes:
.list-item{clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}

Create a bottom line with pointing cards:
.list-item {clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 10% 90%, 0 100%); padding-
bottom:3rem!important}
.user-items-list-carousel__gutter{border-bottom:3px solid #fff;}