How to create list item shapes in Squarespace

Oct 4

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

Just because it’s built with Squarespace, doesn't mean a list section has to be square 😉

In this step-by-step tutorial, you’ll learn how to create a unique shape for a list item using custom CSS.

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ This is specific for list page sections in version 7.1, an auto layout found under the people section.

→ There is more than one way to do this! Code is super customizable, and this is my technique.

Here are the codes from this tutorial.

This first one is for curving the corners of the list item card.

.list-item {
border-radius: 25%
}

This version only curves some of the corners. Play around with the values, trying percentage or other combinations of numbers!

.list-item{
border-radius: 35px 0
}

This code creates the parallelogram:

.list-item{
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

This code changes the shape of the first and last list item on desktop:

@media only screen and (min-width:640px){
.list-item:first-of-type{
border-radius: 35px 0 0 35px !important
}
.list-item:last-of-type{
border-radius: 0 35px 35px 0 !important
}
}