Summary Blocks

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

 Select a Squarespace Element to Examine CSS Selectors:

Squarespace Element Description
Summary Block Elements Refers to summary block elements of all different summary block layouts.

  CSS Code Snippets for Customizing Summary Blocks

Make blog post listings & summary block blog collections look like cards using border stylings, and a background color (i.e. recipe cards)

//Start: Summary block and blog list card layout
.summary-block-collection-type-blog-basic-grid, .blog-basic-grid {
  .summary-item, .blog-item {
    background: #ebebeb;
    border: 1px solid gray;
    border-radius: 6px;
  }
  .summary-thumbnail, .image-wrapper {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .summary-content, .blog-basic-grid--text {
    padding: 10px;
    box-sizing: border-box;
  }
  .summary-read-more-link:after, .blog-more-link:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
  }
}
//End: Summary block and blog list card layout

Set custom font sizes for summary list text elements (title, metadata and excerpt)

//Start: Custom font sizes for summary list text
.summary-content.sqs-gallery-meta-container {
  .summary-title {
    font-size: 1.2em;
  }
  .summary-metadata-container {
    font-size: 1em;
  }
  .summary-excerpt p {
    font-size: .9em;
  }
}
//End: Custom font sizes for summary list text

Make “Read More” links in summary blocks look like buttons

//Start: Make “Read More” links in summary blocks look like buttons
.summary-v2-block .summary-read-more-link {
  background: #000000;
  color: #ffffff;
  width: fit-content;
  padding: 10px;
}
//End: Make “Read More” links in summary blocks look like buttons
Previous

Gallery Blocks
Next

Buttons