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