Copy page

Custom Code Specification

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.

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

data-sqsp-section={type}

The outer wrapper of a page Section in version 7.1.

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

• Classic Editor: classic-editor
• Fluid Engine: fluid-engine
• Auto Layout: auto-layout
• Gallery: gallery
• Blog List: blog-list
• Blog Item: blog-item
• Events List: events-list
• Events Item: events-item
• Portfolio List: portfolio-list
• Product List: product-list
• Product Detail: product-detail
• Product Reviews: product-reviews
• Related Products: related-products
• Course List: course-list
• Course Item: course-item
• Videos List: videos-list
• Videos Item: videos-item

Code
<section class="page-section" data-sqsp-section="fluid-engine">
  ...
</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
• Code Block: code
• Embed Block: embed
• OpenTable Block: opentable
• Scrolling Block: scrolling
• Quote Block: quote
• Summary Block: summary
• Video Block: video
• Social Links Block: social-links
• Search Block: search
• Scheduling Block: scheduling
• Audio Block: audio
• Archive Block: archive

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

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

Text Block

data-sqsp-text-block-content

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

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

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

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

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

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

Shape Block

data-sqsp-shape-block-shape

The shape element of a Shape Block.

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