Summary Block Elements
COMPONENT SELECTOR GUIDE
Global Summary Block Selectors (Selectors That Are the Same Regardless of the Layout)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-summary-v2 | The outer container for the summary block. This selector can be used to select all summary blocks no matter what the layout is. |
|
| .summary-item-list | The summary block wrapper for all summary blocks. |
|
| .summary-item | The individual summary list items. |
|
| .summary-thumbnail-outer-container | The outer container for the summary item thumbnail image. |
|
| .sqs-gallery-image-container | The anchor link container for the thumbnail image. |
|
| .summary-thumbnail-image | The thumbnail image element. |
|
| .sqs-gallery-meta-container | The container for the metadata, including the title, excerpt, primary and secondary metadata. |
|
| .summary-title | The container for the summary title text link. |
|
| .summary-title-link | The summary title text link |
|
| .summary-excerpt | The container for the excerpt text. |
|
| .summary-excerpt p | The the excerpt text. |
|
| .summary-read-more-link | The "Read More" link text. |
|
| .summary-metadata-container | The container for the metadata, including the primary and secondary metadata. |
|
| .summary-metadata--primary | The primary metadata container |
|
| .summary-metadata--primary .summary-metadata-item | The primary metadata text. |
|
| .summary-metadata--secondary | The secondary metadata container |
|
| .summary-metadata--secondary .summary-metadata-item | The secondary metadata text. |
|
HTML Structure Explanation
The HTML structure of the all summary blocks, including it’s descendant elements.
The HTML structure of the all summary blocks, including it’s descendant elements.
“Grid” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-summary-v2 | The outer container for the summary block. This selector can be used to select all summary blocks no matter what the layout is. |
|
| .sqs-gallery-design-autogrid | The summary block wrapper for the "Grid" summary block layout. |
|
| .sqs-gallery-design-autogrid-slide | The individual summary list items. |
|
| .sqs-gallery-design-autogrid .summary-thumbnail-outer-container | The outer container for the summary item thumbnail image. |
|
| .sqs-gallery-design-autogrid .sqs-gallery-image-container | The anchor link container for the thumbnail image. |
|
| .sqs-gallery-design-autogrid .summary-thumbnail-image | The thumbnail image element. |
|
| .sqs-gallery-design-autogrid .sqs-gallery-meta-container | The container for the metadata, including the title, excerpt, primary and secondary metadata. |
|
| .sqs-gallery-design-autogrid .summary-title | The container for the summary title text link. |
|
| .sqs-gallery-design-autogrid .summary-title-link | The summary title text link. |
|
| .sqs-gallery-design-autogrid .summary-excerpt | The container for the excerpt text. |
|
| .sqs-gallery-design-autogrid .summary-excerpt p | The excerpt text. |
|
| .sqs-gallery-design-autogrid .summary-read-more-link | The "Read More" link text. |
|
| .sqs-gallery-design-autogrid .summary-metadata-container | The container for the metadata, including the primary and secondary metadata. |
|
| .sqs-gallery-design-autogrid .summary-metadata--primary | The primary metadata container. |
|
| .sqs-gallery-design-autogrid .summary-metadata--primary .summary-metadata-item | The primary metadata text. |
|
| .sqs-gallery-design-autogrid .summary-metadata--secondary | The secondary metadata container. |
|
| .sqs-gallery-design-autogrid .summary-metadata--secondary .summary-metadata-item | The secondary metadata text. |
|
HTML Structure Explanation
The HTML structure of the “Grid” summary block, including it’s descendant elements.
The HTML structure of the “Grid” summary block, including it’s descendant elements.
“Carousel” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-summary-v2 | The outer container for the summary block. This selector can be used to select all summary blocks no matter what the layout is. |
|
| .sqs-gallery-design-carousel.summary-block-wrapper | The summary block wrapper for the "Carousel" summary block layout. |
|
| .sqs-gallery-design-carousel .summary-block-header | The header above the summary block that contains the text and the left/right carousel arrows. |
|
| .sqs-gallery-design-carousel .summary-heading | The header text in the summary block header element. |
|
| .sqs-gallery-design-carousel .summary-header-text | The header text that is on the far left. |
|
| .sqs-gallery-design-carousel .sqs-gallery-controls | The container for the left/right arrows. |
|
| .sqs-gallery-design-carousel .summary-carousel-pager-prev | The "Previous" arrow container. |
|
| .sqs-gallery-design-carousel .summary-carousel-pager-prev:before | The ":before" psuedo-element that adds the icon to the previous arrow. |
|
| .sqs-gallery-design-carousel .summary-carousel-pager-next | The "Next" arrow container. |
|
| .sqs-gallery-design-carousel .summary-carousel-pager-next:before | The ":before" psuedo-element that adds the icon to the next arrow. |
|
| .sqs-gallery-design-carousel | The summary item list container below the summary block header. |
|
| .sqs-gallery-design-carousel-slide | The individual summary list items. |
|
| sqs-gallery-design-carousel-slide .summary-thumbnail-outer-container | The outer container for the summary item thumbnail image. |
|
| sqs-gallery-design-carousel-slide .sqs-gallery-image-container | The anchor link container for the thumbnail image. |
|
| sqs-gallery-design-carousel-slide .summary-thumbnail-image | The thumbnail image element. |
|
| sqs-gallery-design-carousel-slide .sqs-gallery-meta-container | The container for the metadata, including the title, excerpt, primary and secondary metadata. |
|
| sqs-gallery-design-carousel-slide .summary-title | The container for the summary title text link. |
|
| sqs-gallery-design-carousel-slide .summary-title-link | The summary title text link |
|
| sqs-gallery-design-carousel-slide .summary-excerpt | The container for the excerpt text. |
|
| sqs-gallery-design-carousel-slide .summary-excerpt p | The excerpt text. |
|
| sqs-gallery-design-carousel-slide .summary-read-more-link | The "Read More" link text. |
|
| sqs-gallery-design-carousel-slide .summary-metadata-container | The container for the metadata, including the primary and secondary metadata. |
|
| sqs-gallery-design-carousel-slide .summary-metadata--primary | The primary metadata container. |
|
| sqs-gallery-design-carousel-slide .summary-metadata--primary .summary-metadata-item | The primary metadata text. |
|
| sqs-gallery-design-carousel-slide .summary-metadata--secondary | The secondary metadata container. |
|
| sqs-gallery-design-carousel-slide .summary-metadata--secondary .summary-metadata-item | The secondary metadata text. |
|
HTML Structure Explanation
The HTML structure of the “Carousel” summary block, including it’s descendant elements.
The HTML structure of the “Carousel” summary block, including it’s descendant elements.
“List” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-summary-v2 | The outer container for the summary block. This selector can be used to select all summary blocks no matter what the layout is. |
|
| .sqs-gallery-design-list | The summary block wrapper for the "List" summary block layout. |
|
| .sqs-gallery-design-list-slide | The individual summary list items. |
|
| .sqs-gallery-design-list .summary-thumbnail-outer-container | The outer container for the summary item thumbnail image. |
|
| .sqs-gallery-design-list .sqs-gallery-image-container | The anchor link container for the thumbnail image. |
|
| .sqs-gallery-design-list .summary-thumbnail-image | The thumbnail image element. |
|
| .sqs-gallery-design-list .sqs-gallery-meta-container | The container for the metadata, including the title, excerpt, primary and secondary metadata. |
|
| .sqs-gallery-design-list .summary-title | The container for the summary title text link. |
|
| .sqs-gallery-design-list .summary-title-link | The summary title text link |
|
| .sqs-gallery-design-list .summary-excerpt | The container for the excerpt text. |
|
| .sqs-gallery-design-list .summary-read-more-link | The "Read More" link text. |
|
| .sqs-gallery-design-list .summary-excerpt p | The excerpt text. |
|
| .sqs-gallery-design-list .summary-metadata-container | The container for the metadata, including the primary and secondary metadata. |
|
| .sqs-gallery-design-list .summary-metadata--primary | The primary metadata container. |
|
| .sqs-gallery-design-list .summary-metadata--primary .summary-metadata-item | The primary metadata text. |
|
| .sqs-gallery-design-list .summary-metadata--secondary | The secondary metadata container. |
|
| .sqs-gallery-design-list .summary-metadata--secondary .summary-metadata-item | The secondary metadata text. |
|
HTML Structure Explanation
The HTML structure of the “List” gallery block, including it’s descendant elements.
The HTML structure of the “List” gallery block, including it’s descendant elements.
“Wall” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-summary-v2 | The outer container for the summary block. This selector can be used to select all summary blocks no matter what the layout is. |
|
| .sqs-gallery-design-autocolumns.summary-block-wrapper | The summary block wrapper for the "Wall" summary block layout. |
|
| .sqs-gallery-design-autocolumns-slide | The individual summary list items. |
|
| .sqs-gallery-design-autocolumns .summary-thumbnail-outer-container | The outer container for the summary item thumbnail image. |
|
| .sqs-gallery-design-autocolumns .sqs-gallery-image-container | The anchor link container for the thumbnail image. |
|
| .sqs-gallery-design-autocolumns .summary-thumbnail-image | The thumbnail image element. |
|
| .sqs-gallery-design-autocolumns .sqs-gallery-meta-container | The container for the metadata, including the title, excerpt, primary and secondary metadata. |
|
| .sqs-gallery-design-autocolumns .summary-title | The container for the summary title text link. |
|
| .sqs-gallery-design-autocolumns .summary-title-link | The summary title text link. |
|
| .sqs-gallery-design-autocolumns .summary-excerpt | The container for the excerpt text. |
|
| .sqs-gallery-design-autocolumns .summary-excerpt p | The excerpt text. |
|
| .sqs-gallery-design-autocolumns .summary-read-more-link | The "Read More" link text. |
|
| .sqs-gallery-design-autocolumns .summary-metadata-container | The container for the metadata, including the primary and secondary metadata. |
|
| .sqs-gallery-design-autocolumns .summary-metadata--primary | The primary metadata text. |
|
| .sqs-gallery-design-list .summary-metadata--primary .summary-metadata-item | The primary metadata text. |
|
| .sqs-gallery-design-autocolumns .summary-metadata--secondary | The secondary metadata text. |
|
| .sqs-gallery-design-list .summary-metadata--secondary .summary-metadata-item | The secondary metadata text. |
|
HTML Structure Explanation
The HTML structure of the “Wall” gallery block, including it’s descendant elements.
The HTML structure of the “Wall” gallery block, including it’s descendant elements.
Unique Summary Blocks Using the Block ID
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1690691237911_5006 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Summary Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
The Summary block element with a class name of “sqs-block” and an id attribute.