How to customize list section cards in Squarespace

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

One of the features of a list section is turning on the card background, which creates a solid color background behind each list item.

In your site styles menu you can change the color of the card, but we can do SO much more with code! In this tutorial, you'll learn how to give that card a gradient background, a border, and how to create a hover effect for it too.

The codes from this tutorial are listed below BUT there are some important things you'll want to change so be sure to watch the training so you know exactly which ones you want to use to make your Squarespace site look awesome!

→ Check out this tutorial to learn how you can install this code on a single page in your Squarespace website.

Here are the codes:

Give the card a border:

.list-item[data-is-card-enabled="true"] {border:5px solid blue}

Create a rounded corner with border radius:

.list-item[data-is-card-enabled="true"] {border-radius:25px}

Create a linear gradient background:
(Learn more about gradients at https://insidethesquare.co/gradient)

.list-item[data-is-card-enabled="true"] {background: linear-gradient(to right, blue, red)}

Change border color on a hover:

.list-item[data-is-card-enabled="true"]:hover {border-color:red}

Give it a box shadow on a hover:

.list-item[data-is-card-enabled="true"]:hover {box-shadow: 5px 5px 10px #000}