HTML Attributes

Note: code examples are included for illustration purposes, and may not reflect the exact DOM structure on a Squarespace website.

General

id={value} (sections)

The value specified as the anchor link slug for supported page sections in version 7.1 will appear as the id attribute of the section. See Creating anchor links for more details.

Only anchor link slugs that are manually created using the editing UI are persistent. Automatically generated id values may change.

<section id="my-id">
  ...
</section>

data-sqsp-block={type}

The outer wrapper of a Block.

Here is the list of currently supported Blocks, and their {type} value:

• Text Block: text
• Button Block: button
• Image Block (Fluid Engine only): image
• Shape Block: shape
• Form Block: form
• Zola Block: zola

<div class="sqs-block" data-sqsp-block="button">
  ...
</div>

data-sqsp-button

An interactive button.

Currently used to identify the Button Block and Form Block buttons.

<a href="..." data-sqsp-button>
  ...
</a>

Text Block

data-sqsp-text-block-content

A container enclosing the rich text content of a Text Block.

<div data-sqsp-text-block-content>
  <h1>My Heading</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Image Block (Fluid Engine only)

data-sqsp-image-block-image-container

A container enclosing the image of an Image Block.

Note: this element may not be the direct parent of the img element.

<div data-sqsp-image-block-image-container>
  <div class="...">
    <img src="..." />
  </div>
</div>

data-sqsp-image-block-image

The img element of an Image Block.

<img src="..." data-sqsp-image-block-image />

data-sqsp-image-block-link

The a element of an Image Block, if it has a link attached.

<a href="..." data-sqsp-image-block-link>
  <img src="..." />
</a>

data-sqsp-image-block-lightbox-button

The element that triggers the Image Block lightbox, if it is set to open a lightbox.

<button data-sqsp-image-block-lightbox-button>
  <img src="..." />
</button>

Shape Block

data-sqsp-shape-block-shape

The shape element of a Shape Block.

<svg data-sqsp-shape-block-shape>
  ...
</svg>