Shape Block Elements

COMPONENT SELECTOR GUIDE

Shape Block Elements

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)
General Outer Containers
.sqs-block-shape The shape block container.
.sqs-block-shape .sqs-shape-block-container The shape block inner container. This element also has an attribute named "data-shape-name" which specifies the shape being used.
.sqs-block-shape .sqs-shape The shape element itsself or the parent container for SVG shape, depending on which shape is being used.
Rectangle
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rectangle"] The "Rectangle" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rectangle"] .sqs-shape The "Rectangle" shape.
Circle
.sqs-block-shape .sqs-shape-block-container[data-shape-name="circle"] The "Circle" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="circle"] .sqs-shape The "Circle" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="circle"] .sqs-shape circle The circle HTML element inside of the SVG.
Triangle
.sqs-block-shape .sqs-shape-block-container[data-shape-name="triangle"] The "Triangle" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="triangle"] .sqs-shape The "Triangle" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="triangle"] .sqs-shape polygon The polygon HTML element inside of the SVG.
Diamond
.sqs-block-shape .sqs-shape-block-container[data-shape-name="diamond"] The "Diamond" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="diamond"] .sqs-shape The "Diamond" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="diamond"] .sqs-shape path The path HTML element inside of the SVG.
Rabbet
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rabbet"] The "Rabbet" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rabbet"] .sqs-shape The "Rabbet" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rabbet"] .sqs-shape path The path HTML element inside of the SVG.
Eight Sided Shield
.sqs-block-shape .sqs-shape-block-container[data-shape-name="eight-sided-shield"] The "Eight Sided Shield" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="eight-sided-shield"] .sqs-shape The "Eight Sided Shield" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="eight-sided-shield"] .sqs-shape path The path HTML element inside of the SVG.
TV
.sqs-block-shape .sqs-shape-block-container[data-shape-name="tv"] The "TV" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="tv"] .sqs-shape The "TV" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="tv"] .sqs-shape path The path HTML element inside of the SVG.
Octagon
.sqs-block-shape .sqs-shape-block-container[data-shape-name="octagon"] The "Octagon" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="octagon"] .sqs-shape The "Octagon" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="octagon"] .sqs-shape path The path HTML element inside of the SVG.
Rounded Pentagon
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-pentagon"] The "Rounded Pentagon" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-pentagon"] .sqs-shape The "Rounded Pentagon" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-pentagon"] .sqs-shape path The path HTML element inside of the SVG.
Gear
.sqs-block-shape .sqs-shape-block-container[data-shape-name="gear"] The "Gear" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="gear"] .sqs-shape The "Gear" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="gear"] .sqs-shape path The path HTML element inside of the SVG.
Four Point Star
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-point-star"] The "Four Point Star" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-point-star"] .sqs-shape The "Four Point Star" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-point-star"] .sqs-shape path The path HTML element inside of the SVG.
Open Book
.sqs-block-shape .sqs-shape-block-container[data-shape-name="open-book"] The "Open Book" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="open-book"] .sqs-shape The "Open Book" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="open-book"] .sqs-shape path The path HTML element inside of the SVG.
Pointed Star
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-star"] The "Pointed Star" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-star"] .sqs-shape The "Pointed Star" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-star"] .sqs-shape g The g HTML element inside of the SVG.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-star"] .sqs-shape path The path HTML element inside of the SVG.
Stepped Cross
.sqs-block-shape .sqs-shape-block-container[data-shape-name="stepped-cross"] The "Stepped Cross" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="stepped-cross"] .sqs-shape The "Stepped Cross" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="stepped-cross"] .sqs-shape path The path HTML element inside of the SVG.
Rounded Star
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-star"] The "Rounded Star" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-star"] .sqs-shape The "Rounded Star" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="rounded-star"] .sqs-shape path The path HTML element inside of the SVG.
Flower
.sqs-block-shape .sqs-shape-block-container[data-shape-name="flower"] The "Flower" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="flower"] .sqs-shape The "Flower" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="flower"] .sqs-shape path The path HTML element inside of the SVG.
Four Petal Flower
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-petal-flower"] The "Four Petal Flower" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-petal-flower"] .sqs-shape The "Four Petal Flower" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-petal-flower"] .sqs-shape path The path HTML element inside of the SVG.
Four Leaf Clover
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-leaf-clover"] The "Four Leaf Clover" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-leaf-clover"] .sqs-shape The "Four Leaf Clover" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="four-leaf-clover"] .sqs-shape path The path HTML element inside of the SVG.
Horizontal Stacked Circles
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-stacked-circles"] The "Horizontal Stacked Circles" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-stacked-circles"] .sqs-shape The "Horizontal Stacked Circles" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-stacked-circles"] .sqs-shape path The path HTML element inside of the SVG.
Wide Vertical Stacked Pills
.sqs-block-shape .sqs-shape-block-container[data-shape-name="wide-vertical-stacked-pills"] The "Wide Vertical Stacked Pills" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="wide-vertical-stacked-pills"] .sqs-shape The "Wide Vertical Stacked Pills" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="wide-vertical-stacked-pills"] .sqs-shape path The path HTML element inside of the SVG.
Horizontal Right Leaning Oval
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-right-leaning-oval"] The "Horizontal Right Leaning Oval" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-right-leaning-oval"] .sqs-shape The "Horizontal Right Leaning Oval" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="horizontal-right-leaning-oval"] .sqs-shape ellipse The ellipse HTML element inside of the SVG.
Parallelogram
.sqs-block-shape .sqs-shape-block-container[data-shape-name="parallelogram"] The "Parallelogram" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="parallelogram"] .sqs-shape The "Parallelogram" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="parallelogram"] .sqs-shape path The path HTML element inside of the SVG.
Arched Window
.sqs-block-shape .sqs-shape-block-container[data-shape-name="arched-window"] The "Arched Window" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="arched-window"] .sqs-shape The "Arched Window" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="arched-window"] .sqs-shape path The path HTML element inside of the SVG.
Pointed Window
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-window"] The "Pointed Window" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-window"] .sqs-shape The "Pointed Window" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="pointed-window"] .sqs-shape path The path HTML element inside of the SVG.
Award
.sqs-block-shape .sqs-shape-block-container[data-shape-name="award"] The "Award" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="award"] .sqs-shape The "Award" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="award"] .sqs-shape path The path HTML element inside of the SVG.
Narrow Pow
.sqs-block-shape .sqs-shape-block-container[data-shape-name="narrow-pow"] The "Narrow Pow" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="narrow-pow"] .sqs-shape The "Narrow Pow" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="narrow-pow"] .sqs-shape path The path HTML element inside of the SVG.
Egg
.sqs-block-shape .sqs-shape-block-container[data-shape-name="egg"] The "Egg" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="egg"] .sqs-shape The "Egg" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="egg"] .sqs-shape path The path HTML element inside of the SVG.
Hourglass
.sqs-block-shape .sqs-shape-block-container[data-shape-name="hourglass"] The "Hourglass" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="hourglass"] .sqs-shape The "Hourglass" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="hourglass"] .sqs-shape path The path HTML element inside of the SVG.
Keystone
.sqs-block-shape .sqs-shape-block-container[data-shape-name="keystone"] The "Keystone" shape container.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="keystone"] .sqs-shape The "Keystone" SVG shape.
.sqs-block-shape .sqs-shape-block-container[data-shape-name="keystone"] .sqs-shape path The path HTML element inside of the SVG.

HTML Structure Explanation

The HTML structure of the code block elements.

Parallelogram HTML

Parallelogram HTML

Rectangle HTML

Rectangle HTML

Unique Shape 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_1698185483093_9220 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 Shape 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 shape block element with a class name of “sqs-block” and an id attribute.

Previous
Previous

Code Block Elements

Next
Next

Social Link Block Elements