/// Layout
Bleed
A negative-margin helper that pulls content outward to bleed to the edge of a padded surface like a Card.
import { Bleed } from "@protocore/pds";Bleeding to a card edge
Wrap an image, divider, or table in Bleed inline to cancel the surrounding padding on the inline axis so the content spans edge to edge. true pulls by exactly --pds-card-pad, matching the default Card inset.
The divider below bleeds past the card padding on the inline axis to touch both walls.
Content resumes at the normal inset.
Custom amounts and axes
Pass a number for a pixel bleed, and choose axes independently with inline and block. Margins use logical properties, so an inline bleed mirrors correctly under RTL.
A 24px inline bleed on an image strip:
When to use it
Bleed solves the recurring tension between a padded surface and content that wants to touch its edge — a hero image at the top of a Card, a full-width divider, a data table that should reach the walls. Rather than restructuring the Card or overriding its padding, wrap just the bleeding child.
It is a pure layout box with no styling of its own, and it is server-safe. Keep the bleed amount equal to the surface's padding (true = --pds-card-pad) so the content aligns exactly with the edge.
Usage
Do
- Match the bleed to the surface padding (`true` = card pad) for a clean edge.
- Bleed a single child — an image, a divider, a table.
- Use `inline`/`block` to bleed only the axes you mean to.
- Reach for a pixel value when the padding isn't the card default.
Don't
- Bleed a whole content column; scope it to the edge element.
- Over-bleed past the surface; the content will spill outside.
- Reintroduce physical `margin-left`/`right`; the helper is logical for RTL.
Bleed props
| Prop | Type | Default | Description |
|---|---|---|---|
block | BleedAmount | — | Bleed on the block axis (top/bottom). `true` uses `--pds-card-pad`. |
className | string | — | |
inline | BleedAmount | — | Bleed on the inline axis (start/end). `true` uses `--pds-card-pad`. |
style | CSSProperties | — |