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="center box" data-max="lg">
    <p>A plain section above. Its bottom edge is a straight line, the way a section's edge always was, and the seam below is cut from the next section's own background, so this one shows through the cut.</p>
</section>
<section class="seam box" data-shape="wave" data-edge="both" data-paint="primary" data-gap="lg">
    <p>A wave cut into both edges of this section, top and bottom, out of its own background. The cut is part of the section, not a stripe laid over the join, so it runs the full width of whatever the section is in: drag the box narrower and the wave is redrawn to fit.</p>
    <p>The depth of the cut is added as space on the cut edge, so the text never sits in the wave. Pick a slant or a curve from the controls, or flip the shape, and the section keeps its content where it was.</p>
</section>
<section class="center box" data-max="lg">
    <p>And a plain section below, showing through the cut above it. Give this one a seam too and the page alternates, section by section.</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-size`	enum	`sm`, `md`, `lg`	`md`	The depth of the cut: twice the size's space step.
`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.

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.