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
• Image Block (Classic Editor only): image-classic
• 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
• Gallery Block: gallery
• Line Block: line
• Accordion Block: accordion
• Newsletter Block: newsletter
• Pricing Plan Block: pricing-plan

Button Block

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>

Image Block (Classic Editor only)

data-sqsp-image-classic-block-image-container

A container enclosing the image of the classic editor Image Block.

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

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

data-sqsp-image-classic-block-image

The img element of a classic editor Image Block.

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

data-sqsp-image-classic-block-image-link

The a element of a classic editor Image Block, if it has a link attached to the image.

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

data-sqsp-image-classic-block-lightbox-button

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

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

data-sqsp-image-classic-block-layout={value}

Identifies the design layout selected for the classic editor Image Block.

Occurs on an element containing the image, text, and button of the classic editor Image Block.

Possible values: inline, poster, card, overlap, collage, stack.

Code
<figure data-sqsp-image-classic-block-layout="poster">...</figure>

data-sqsp-image-classic-block-content-container

A container enclosing Title, Subtitle, and Button of the classic editor Image Block in non-Inline layouts.

Code
<div data-sqsp-image-classic-block-content-container>
    ...
</div>

data-sqsp-image-classic-block-caption-container

A container enclosing the caption of a classic editor Image Block in the Inline layout.

Note: this element may not be the direct container of the caption text.

Code
<figcaption data-sqsp-image-classic-block-caption-container>
  ...
</figcaption>

data-sqsp-image-classic-block-title

A container enclosing the title of a classic editor Image Block in non-Inline layouts.

Note: this element may not be the direct parent of the title h1/h2/h3/h4 element.

Code
<div data-sqsp-image-classic-block-title>
  ...
   <h1>Title</h1>
  ...
</div>

data-sqsp-image-classic-block-subtitle

A container enclosing the subtitle of a classic editor Image Block in non-Inline layouts.

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

Code
<div data-sqsp-image-classic-block-subtitle>
  ...
   <p>Subtitle</p>
  ...
</div>

data-sqsp-image-classic-block-link-button

The a element of a classic editor Image Block in non-Inline layouts, the link is set to appear on a button.

Code
<a href="..." data-sqsp-image-classic-block-link-button>Learn more</a>

Shape Block

data-sqsp-shape-block-shape

The shape element of a Shape Block.

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

Accordion Block

data-sqsp-accordion-block-divider

A divider element separating the Accordion Block items.

Code
<li>
  <h1>My heading</h1>
  <div>My paragraph text</div>
  <div data-sqsp-accordion-block-divider></div>
</li>

data-sqsp-accordion-block-item-title

A container enclosing the title text of the Accordion Block item.

Code
<li>
  <h1 data-sqsp-accordion-block-item-title>
  My heading
  </h1>
  <div>My paragraph text</div>
</li>

data-sqsp-accordion-block-item-description

A container enclosing the description text of the Accordion Block item.

Code
<li>
  <h1>My heading</h1>
  <div data-sqsp-accordion-block-item-description>
    My paragraph text
  </div>
</li>