Summary Block

Description

Summary blocks are used to display collection pages of content that are pulled from blog posts, products, images, events, etc.

There are 4 kinds of summary block layouts:

• Wall — masonry style

• Carousel — set number of items in a row

• List — lists items in one column

• Grid — displays in an even grid

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.summary-title {
}

</style>

All Layouts

Custom CSS

To target the title

/* summary title */
.summary-title {
}

To target the thumbnail

/* thumbnail */
.sqs-block-summary-v2 .img-wrapper img {
}

To target the excerpt

/* excerpt */
.summary-excerpt {
}

To target the summary header text

/* summary header text */
.summary-header-text {
}

To target the read more link

/* read more link */
.summary-read-more-link {
}

When pulling from an events page, to target the overlay date

/* event overlay: month */
.summary-thumbnail-event-date-month {
}

/* event overlay: day */
.summary-thumbnail-event-date-day {
}

To target the different metadata

/* primary metadata */
.summary-metadata-primary {
}

/* secondary metadata */
.summary-metadata-secondary {
}

/* metadata: date */
.summary-metdata-item-date {
}

/* metadata: category */
.summary-metadata-item--cats {
}

/* metadata: tags */
.summary-metadata-item--tags {
}

/* metadata: author */
.summary-metadata-item--author {
}

/* metadata: location */
.summary-metadata-item--location {
}

/* metadata: comments */
.summary-metadata-item--comments {
}

/* metadata: event time (12hr) */
.event-time-12hr {
}

/* metadata: event time (24hr) */
.event-time-24hr {
}

Wall

Custom CSS

/* summary block - wall */
.sqs-gallery-design-autocolumns {
}

Carousel

Custom CSS

/* summary block - carousel */
.sqs-gallery-design-carousel {
}

List

Custom CSS

/* summary block - list */
.sqs-gallery-design-list {
}

Grid

/* summary block - grid */
.sqs-gallery-design-autogrid {
}