Seam

Gives a section a shaped edge, a slant, a curve, or a wave, cut from its own background so whatever is behind shows through.

Example

View Code

<section class="seam" data-shape="wave" style="background: var(--yeti-color-primary-subtle); padding: var(--yeti-space-lg)">
    <h2>A section with a wave along its bottom edge</h2>
    <p>Whatever comes next shows through the cut.</p>
</section>

When to use it

Between bands of a landing page, where a straight line between two backgrounds looks cut from cardboard. A slant, a curve, or a wave along one edge of a section, alternating direction down the page, is the classic move.

How it works

The cut is taken from the section itself, not added on top: a slant is a clip-path polygon, a curve or wave a mask made of a solid body and a shaped strip along the cut edge. Because the section's own background is what is cut, the page, the previous section, or an image behind it shows through, with no extra element. data-edge picks the edge, data-size the depth, data-flip mirrors a slant or a wave for the next section down. The seam adds the depth of the cut as space after or before the content, so give the section its padding as usual and nothing sits in the cut.

<section class="seam" data-shape="slant" data-edge="both" data-flip data-size="lg" style="background: var(--yeti-color-secondary-subtle); padding: var(--yeti-space-xl)">
    <h2>Slanted top and bottom</h2>
</section>

Accessibility

Purely visual. The clip and the mask change nothing about the content, its order, or its size for assistive tech; the added space keeps text out of the cut for everyone.

Attributes

Attribute	Type	Values	Default	Description
`data-shape`	enum	`slant`, `curve`, `wave`	`slant`	The shape of the cut edge.
`data-edge`	enum	`top`, `bottom`, `both`	`bottom`	Which edge is cut.
`data-flip`	boolean			Mirror the shape horizontally, for alternating sections. A curve is symmetric and does not change.
`data-size`	enum	`sm`, `md`, `lg`	`md`	The depth of the cut: twice the size's space step.

Children

No structural requirements.

Tokens

Token	Description
`--yeti-seam-size`	Fix the depth for every size.
`--yeti-space-sm`	The depth when data-size is absent.

Internal tokens (may change between minor versions)

- `--_yeti-seam` - `--_yeti-seam-curve-top` - `--_yeti-seam-curve-bottom` - `--_yeti-seam-wave-top` - `--_yeti-seam-wave-bottom` - `--_yeti-seam-wave-top-flip` - `--_yeti-seam-wave-bottom-flip` - `--_yeti-size-space` - `--_yeti-seam-top` - `--_yeti-seam-bottom`

Accessibility

Decorative only; nothing changes for assistive tech. The seam adds its depth as space on a cut edge so text never sits in the cut.

Browser support

Used without guards: clip-path: polygon(), mask-image
Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.