Default Canvas (attribute form)

Article with Canvas Surface

This article uses data-canvas for an elevated surface with background, radius, shadow, and padding.

Element Form

Layout Canvas Element

Same appearance using the <layout-canvas> custom element wrapper.

Flush Variant

Flush Canvas

No border radius or shadow. Edge-to-edge surface.

Elevated Variant

Elevated Canvas

Larger radius and dramatic shadow for emphasis.

Width: Narrow (45rem)

Narrow Canvas

Constrained to narrow width, auto-centered.

Width: Content (60rem)

Content-Width Canvas

Standard content width constraint.

Nested Canvases

Outer Canvas

Primary surface background.

Ghost Card Depth 1

Single Ghost Card

One stacked paper shadow beneath the canvas.

Ghost Card Depth 2

Double Ghost Cards

Two stacked paper shadows for extra depth.

Multiple Canvases

Canvas A

Independent canvas region.