Shape

A decorative graphic — either an SVG shape from the library or an uploaded image — placed at a chosen alignment and recoloured per SVG path. Designed for purely decorative graphics: blobs, waves, geometric shapes, custom logo marks.

When to use it

Decorative blob / wave / shape behind or beside content
Custom logo or graphic mark that doesn't carry icon semantics
Multi-colour SVG illustration where each path needs its own

colour

When not to use it

A click-target with semantics — use Icon Card (it has Title,

Link, etc.) or Button

A photo / raster image — use Image
An animated decorative graphic — use Animator with image

content type

Settings

Graphic type

Set internally by how the shape was inserted (svg / image). The preview thumbnail at the top of the panel adapts:

SVG → 48×48 inline <svg> filled with Color 1
Image → 72×72 thumb of the uploaded image

The section heading also adapts: "Shape Settings" for SVG, "Image Settings" for raster.

Align — Left · Center · Right (default: Center)

Horizontal alignment within the parent container.

Width — 10–1200px (default: 300)

Block width. The shape scales to fit.

Colours (1–3 swatches, SVG only — hidden for raster image)

The number of swatches matches the number of distinct fill colours found in the SVG:

1 colour — single swatch labelled Color (left-aligned)
2 colours — Color 1 (left) + Color 2 (right)
3 colours — Color 1 (left) + Color 2 (centre) +

Color 3 (right)

Each swatch maps to one path / fill in the SVG. Image graphics don't expose colour swatches (they're raster).

Per-device overrides

Align, Width, and per-colour swatches all have separate Tablet and Mobile values.

Common overrides:

Width — smaller on mobile (the same shape needs less space)
Align — sometimes Center on mobile while Left / Right on

desktop

Common patterns

Decorative blob behind content

SVG shape (organic blob) · Align Center · Width 800 · Color muted grey. Place behind a Heading via Section z-order.

Two-colour wave divider

SVG (wave) with 2 fills · Color 1 brand light, Color 2 brand dark · Align Center · Width 100% (1200).

Custom hero mark

Image upload (PNG / SVG) · Align Center · Width 320. Pair with a Heading below.

blocks/icon-card-card — for an icon picker with semantics (link,

title, description)

blocks/image — for raster photos (the better choice if there

are no recolourable paths)

blocks/animator — when the decorative graphic should animate
blocks/section — wrap SVG Shape in a Section for layered hero

treatment