Shape Divider renders a full-width decorative SVG between two sections. Use it to create a smooth visual transition between sections with different background colors — a wave, curve, or triangle that makes the boundary feel intentional rather than abrupt.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Shape Divider. The block drops in as a wave shape. Set it to Full or Wide alignment from the toolbar so it spans the full content width.

Shape

Shape style — five SVG shapes:

ShapeDescription
WaveSinusoidal double-wave — the smoothest, most natural transition
CurveSingle arc that sweeps from one side to the other
TriangleCentered triangle pointing up into the section above
TiltStraight diagonal — flat on the right edge, angled on the left
SlantStraight diagonal — flat on the left edge, angled on the right

Flip horizontal mirrors the shape left to right — most useful with the asymmetric shapes (Tilt, Slant) to reverse the angle. Flip vertical turns it upside down; use it when the divider sits at the top of a section rather than the bottom, so the shape opens downward into the section instead of upward.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the divider is; Styles is how it looks.

TabSectionCovers
SettingsShapeShape style, flip horizontal, flip vertical
SettingsAdvancedVisibility, Position, anchor, CSS class
StylesShapeFill, the band behind it, and height
StylesSpacingPadding and margin on the outer wrapper

Styling

PartRows
ShapeFill, Behind shape, Height (per device)
  • Fill paints the SVG path itself — the shape you see. It's a background control, so it takes a solid color or a gradient. Image and overlay are off; a shape path has nowhere to put them. Default #ffffff.
  • Behind shape is the band the SVG sits on, filling the rest of the rectangular wrapper. Default #f6f7f7. Set it to match the section the shape points away from.
  • Height controls how tall the shape area is, and carries a unit picker — px, rem, vh, or % — each with its own sensible range (10–500 px, 1–30 rem, 1–100 vh/%). Taller values make the shape more pronounced. Per-device, so a dramatic 200 px wave on desktop can settle to 60 px on mobile.

The block supports Wide and Full alignment from the toolbar — use Full to break out of a constrained layout and span the viewport edge to edge.

HTML output

// terminalhtml
<div
  class="axiom-blocks-shape-divider axiom-blocks-shape-divider--wave"
  style="height: 80px; background-color: #f6f7f7;"
  aria-hidden="true"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1200 120"
    preserveAspectRatio="none"
    class="axiom-blocks-shape-divider__svg"
  >
    <path d="M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z" fill="#ffffff"></path>
  </svg>
</div>

With a gradient Fill, the SVG carries a paint server and the path references it:

// terminalhtml
<svg ... >
  <defs>
    <linearGradient id="ab-sd-grad-1" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#7c3aed"></stop>
      <stop offset="100%" stop-color="#10b981"></stop>
    </linearGradient>
  </defs>
  <path d="…" fill="url(#ab-sd-grad-1)"></path>
</svg>

When both flip toggles are on, the SVG receives an inline transform:

// terminalhtml
<svg ... style="transform: scaleX(-1) scaleY(-1);">

The SVG uses preserveAspectRatio="none" so it always stretches to fill the full block width regardless of container size. Per-device heights are emitted as scoped media-query rules, so the inline height is always the desktop value.