Image Block Elements
COMPONENT SELECTOR GUIDE
On This Page:
“Inline” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-inline | The wrapper for the "Inline" image blocks. |
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-inline .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the inline image. |
|
| .sqs-block-image .design-layout-inline .image-block-wrapper | The wrapper for the image block image element. |
|
| .sqs-block-image .design-layout-inline img | The image block element. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-inline .image-caption-wrapper | The wrapper for the image caption. |
|
| .sqs-block-image .design-layout-inline .image-caption | The parent element of the image caption text. |
|
| .sqs-block-image .design-layout-inline .image-caption PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image caption by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Paragraph elements inside of the image caption.
|
HTML Structure Explanation
The HTML structure for the “Inline” image blocks.
The HTML structure for the “Inline” image blocks.
“Poster” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-poster | The wrapper for the "Poster" image blocks. |
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-poster .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the poster image. |
|
| .sqs-block-image .design-layout-poster img | The image block element. |
|
| .sqs-block-image .design-layout-poster .image-overlay | The overlay element for the "Poster" image. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-poster .image-card-wrapper | The outer wrapper for the text content. |
|
| .sqs-block-image .design-layout-poster .image-card | The parent element of the image title, subtitle, and button. |
|
| .sqs-block-image .design-layout-poster .image-button | The image button container if there is a button link on the poster image. |
|
| .sqs-block-image .design-layout-poster .image-button-inner | The image button inner container if there is a button link on the poster image. |
|
| .sqs-block-image .design-layout-poster .image-button a[href] | The image button link element if there is a button link on the poster image. |
|
| .sqs-block-image .design-layout-poster .image-title | The image title container. |
|
| .sqs-block-image .design-layout-poster .image-title PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image title wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
|
| .sqs-block-image .design-layout-poster .image-subtitle | The image subtitle container. |
Heading 2 elements inside the subtitle container.
|
| .sqs-block-image .design-layout-poster .image-subtitle PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image subtitle wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Paragraph elements inside the subtitle container.
|
HTML Structure Explanation
The HTML structure for the “Poster” image blocks with a button link.
The HTML structure for the “Poster” image blocks with a button link.
The HTML structure for the “Poster” image blocks with a link on the image.
The HTML structure for the “Poster” image blocks with a link on the image.
“Card” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-card | The wrapper for the "Card" image blocks. This is styled using a flexbox. |
|
| .sqs-block-image .design-layout-card.image-position-left | The wrapper for the "Card" image blocks with the image on the left. |
|
| .sqs-block-image .design-layout-card.image-position-right | The wrapper for the "Card" image blocks with the image on the right. |
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-card .intrinsic | The container for the image elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-card .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the poster image. |
|
| .sqs-block-image .design-layout-card img | The image element. |
|
| .sqs-block-image .design-layout-card .image-overlay | The overlay element for the "Card" image. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-card .image-card-wrapper | The outer container for the text and button elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-card .image-card | The parent container for the text and button elements. |
|
| .sqs-block-image .design-layout-card .image-title | The title container. |
|
| .sqs-block-image .design-layout-card .image-title PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image title wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
|
| .sqs-block-image .design-layout-card .image-subtitle | The subtitle container. |
|
| .sqs-block-image .design-layout-card .image-subtitle PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image subtitle wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
|
| .sqs-block-image .design-layout-card .image-button | The outer wrapper for the button element. |
|
| .sqs-block-image .design-layout-card .image-button-inner | The inner wrapper for the button element. |
|
| .sqs-block-image .design-layout-card .image-button a | The button link text. |
|
HTML Structure Explanation
The HTML structure for the “Card” image blocks with the link on the button.
The HTML structure for the “Card” image blocks with the link on the button.
The HTML structure for the “Card” image blocks with the link on the image.
The HTML structure for the “Card” image blocks with the link on the button.
“Overlap” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-overlap | The wrapper for the "Overlap" image blocks. This is styled using a flexbox. |
|
| .sqs-block-image .design-layout-overlap.image-position-left | The wrapper for the "Overlap" image blocks with the image on the left. |
|
| .sqs-block-image .design-layout-overlap.image-position-right | The wrapper for the "Overlap" image blocks with the image on the right. |
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-overlap .intrinsic | The container for the image elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-overlap .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the overlap image. |
|
| .sqs-block-image .design-layout-overlap img | The image element. |
|
| .sqs-block-image .design-layout-overlap .image-overlay | The overlay element for the "Card" image. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-overlap .image-card-wrapper | The outer container for the text and button elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-overlap .image-card | The parent container for the text and button elements. |
|
| .sqs-block-image .design-layout-overlap .image-title-wrapper | The image title outer wrapper. |
|
| .sqs-block-image .design-layout-overlap .image-title | The image title inner wrapper. |
|
| .sqs-block-image .design-layout-overlap .image-title PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image title wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Heading 3 elements inside of the image title.
|
| .sqs-block-image .design-layout-overlap .image-subtitle-wrapper | The image subtitle outer wrapper. |
|
| .sqs-block-image .design-layout-overlap .image-subtitle | The image subtitle inner wrapper. |
|
| .sqs-block-image .design-layout-overlap .image-subtitle PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image subtitle wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Paragraph elements inside of the image subtitle.
|
| .sqs-block-image .design-layout-overlap .image-button | The outer wrapper for the button element. |
|
| .sqs-block-image .design-layout-overlap .image-button | The outer wrapper for the button element. |
|
| .sqs-block-image .design-layout-overlap .image-button a | The button link text. |
|
HTML Structure Explanation
The HTML structure for the “Overlap” image blocks with the link on the button.
The HTML structure for the “Overlap” image blocks with the link on the button.
The HTML structure for the “Overlap” image blocks with the link on the image.
The HTML structure for the “Overlap” image blocks with the link on the image.
“Collage” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-collage | The wrapper for the "Collage" image blocks. This is styled using a flexbox. |
|
| .sqs-block-image .design-layout-collage.image-position-left | The wrapper for the "Collage" image blocks with the image on the left. |
Image position left
|
| .sqs-block-image .design-layout-collage.image-position-right | The wrapper for the "Collage" image blocks with the image on the right. |
Image position right
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-collage .intrinsic | The container for the image elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-collage .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the overlap image. |
|
| .sqs-block-image .design-layout-collage img | The image element. |
|
| .sqs-block-image .design-layout-collage .image-overlay | The overlay element for the "Card" image. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-collage .image-card-wrapper | The outer container for the text and button elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-collage .image-card | The parent container for the text and button elements. |
|
| .sqs-block-image .design-layout-collage .image-title-wrapper | The image title outer wrapper. |
|
| .sqs-block-image .design-layout-collage .image-title | The image title inner wrapper. |
|
| .sqs-block-image .design-layout-collage .image-title PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image title wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Heading 3 elements inside of the image subtitle.
|
| .sqs-block-image .design-layout-collage .image-subtitle-wrapper | The image subtitle outer wrapper. |
|
| .sqs-block-image .design-layout-collage .image-subtitle | The image title inner wrapper. |
|
| .sqs-block-image .design-layout-collage .image-subtitle PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image subtitle wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
Paragraph elements inside of the image subtitle.
|
| .sqs-block-image .design-layout-collage .image-button | The outer wrapper for the button element. |
|
| .sqs-block-image .design-layout-collage .image-button-inner | The inner wrapper for the button element. |
|
| .sqs-block-image .design-layout-collage .image-button a | The button link text. |
|
HTML Structure Explanation
The HTML structure for the “Collage” image blocks with the link on the button.
The HTML structure for the “Overlap” image blocks.
The HTML structure for the “Collage” image blocks with the link on the image.
The HTML structure for the “Collage” image blocks with the link on the image.
“Stack” Image Block Elements (Classic Editor)
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) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. |
|
| .sqs-block-image .design-layout-stack | The wrapper for the "Collage" image blocks. This is styled using a flexbox. |
|
| Image Container Elements | ||
| .sqs-block-image .design-layout-stack .intrinsic | The container for the image elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-stack .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the overlap image. |
|
| .sqs-block-image .design-layout-stack img | The image element. |
|
| .sqs-block-image .design-layout-stack .image-overlay | The overlay element for the "Card" image. |
|
| Text Container Elements | ||
| .sqs-block-image .design-layout-stack .image-card-wrapper | The outer container for the text and button elements. This is a flexible child item of the parent flexbox. |
|
| .sqs-block-image .design-layout-stack .image-card | The parent container for the text and button elements. |
|
| .sqs-block-image .design-layout-stack .image-title-wrapper | The image title outer wrapper. |
|
| .sqs-block-image .design-layout-stack .image-title | The image title inner wrapper. |
|
| .sqs-block-image .design-layout-stack .image-title PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image title wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
|
| .sqs-block-image .design-layout-stack .image-subtitle-wrapper | The image subtitle outer wrapper. |
|
| .sqs-block-image .design-layout-stack .image-subtitle | The image title inner wrapper. |
|
| .sqs-block-image .design-layout-stack .image-subtitle PUT_TEXT_ELEMENT_SELECTOR_HERE | You can select text elements inside the image subtitle wrapper by putting an element selector in the placeholder. For instance, to style p elements, use the element selector "p". To style h2 elements, use the element selector "h2". |
|
| .sqs-block-image .design-layout-stack .image-button | The outer wrapper for the button element. |
|
| .sqs-block-image .design-layout-stack .image-button-inner | The inner wrapper for the button element. |
|
| .sqs-block-image .design-layout-stack .image-button a | The button link text. |
|
HTML Structure Explanation
The HTML structure for the “Stack” image blocks with the link on the button.
The HTML structure for the “Stack” image blocks with the link on the button.
The HTML structure for the “Stack” image blocks with the link on the image.
The HTML structure for the “Stack” image blocks with the link on the image.
Fluid Engine Image Blocks
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | |
|---|---|---|
| .sqs-block-image | The outer container for the image block. This selector can be used to select all image blocks no matter what the layout is. | 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-image .design-layout-fluid | The wrapper for the "Fluid Engine" image blocks. |
|
| .sqs-block-image .design-layout-fluid .sqs-block-image-link | The anchor link wrapper for the image if there is a link on the Fluid Engine image. |
|
| .sqs-block-image .design-layout-fluid img | The image element. |
|
| .sqs-block-image .design-layout-fluid .fluidImageOverlay | The overlay element for the "Fluid Engine" image. |
|
HTML Structure Explanation
The HTML structure for the “Fluid Engine” image blocks with no link.
The HTML structure for the “Fluid Engine” image blocks with no link.
The HTML structure for the “Fluid Engine” image blocks with the link on the image.
The HTML structure for the “Fluid Engine” image blocks with the link on the image.
Unique Image 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 Image 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.
An Image block element with a class name of “sqs-block” and an id attribute.