Bleed
Extend content beyond the space provided by its parent.
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.
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 render contract.
API
BleedProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type