DIY | Library | Summary Block

Design Better Layouts with Squarespace Summary Block CSS

This post covers custom styling for the Squarespace CSS summary block, one of the most flexible elements in your site layout. Summary blocks are often used to display blog posts, events, or products in a preview format—but the default style may not always suit your brand. Here you’ll find CSS code snippets that can help you adjust image ratios, font styles, spacing, and hover effects.

I’ll keep adding new code here as I come across more use cases. If there’s a look you’re trying to achieve, feel free to email me at sarah@foubography.com.

Just paste this bit of code in Design > Custom CSS and adjust accordingly.

• Summary Block | Title

  /* Summary Block Title */

  .sqs-block-summary-v2 { .summary-title, .summary-heading {

  font-family: syne;
  font-weight: 800;
  font-size: 18px !important;
  text-transform: uppercase;

  } }

  /* Summary Block Title END */

• Summary Block | Justify Title

  .sqs-block-summary-v2 {

  .summary-title,

  .summary-heading {

  text-align: justify;

  } }

• Summary Block | Metadata

  /* Summary Block Metadata */

  .summary-metadata-item {
  font-family: syne;
  text-transform: uppercase !important;

  }

  /* Summary Block Metadata END */

• Summary Blocks | Demeter between Primary & Secondary Metadata

  /* Remove Original Demeter */

  .summary-metadata-item:after {

  display: none;

  }

  /* Remove Original Demeter END */

  /* Add New Demeter */

  .summary-metadata--primary:after {

    content: "|";

    font-weight: 500;

    padding-left: 0.25px;

    padding-right: 4.5px;

  }

  /* Add New Demeter END */

• Summary Block | Demeter Between Categories

  .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats {
    font-size: 0px !important;
  }

  .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a{
    font-size: 10px !important;
    font-family: 'Poppins';
  }

  .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a:not(:last-child):after{
    content: "|";
    visibility: visible;
    padding-left: 8px;
    padding-right: 8px;
  }

• Summary Block | Carousel | Automatic Slide

  !!! This is Javascript !!!
  Copy this in: Code Injection > Header

  <script>

  window.onload = function() {

  var nextArrow = document.querySelector(".summary-carousel-pager-next");

  function clickNext() {

  nextArrow.click();

  }

  setInterval(clickNext, 6000);

  };

  </script>

Related posts

Looking to customise your Squarespace site with code? This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.