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.