HTML Attributes

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

General

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
• Form Block: form

<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>