Bleed

Bleed lets content extend beyond the space provided by its parent. Use it when a child should reach farther on one or more edges without changing the parent's spacing.

Choose how far to extend

Pass a spacing token for the distance to extend. The value does not need to match the parent's padding. When it does, the content reaches the parent's edge.

Use all to extend both axes by the same amount.

Bleed accepts the same responsive spacing values as other layout props. Read Responsive values for breakpoint behaviour.

Choose the edges

Use inline to extend both inline edges and block to extend both block edges. Use inlineStart, inlineEnd, blockStart, or blockEnd when only one edge should extend.

At the same breakpoint, an axis prop overrides all, and an edge prop overrides its axis prop. A value continues to larger breakpoints until any of these props has a value at a later breakpoint. For example, inline="space.16" inlineStart={{ bp768: 'space.8' }} extends the inline-start edge by space.16 below bp768 and by space.8 from bp768.

Use '0' at a breakpoint to stop bleeding. Here, inline matches the parent's padding on narrow viewports, so the item reaches both edges. Resize the preview: at bp640, inline is '0' and the parent's padding keeps the item inset.

Overlap adjacent items

In a Stack, a block bleed larger than the gap extends into the space around adjacent items.

In a Grid, use all to extend a cell into the gaps on every side.

Choose the rendered element

Bleed uses Box's elementType and renderRoot contract.

API