# Bleed
- **Category:** Layout (`layout`)
- **Slug:** `layout/bleed`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Bleed } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/bleed
> A negative-margin helper that pulls content outward to bleed to the edge of a padded surface like a Card.
## 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.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `block` | `BleedAmount` | no | — | Bleed on the block axis (top/bottom). `true` uses `--pds-card-pad`. |
| `className` | `string` | no | — | — |
| `inline` | `BleedAmount` | no | — | Bleed on the inline axis (start/end). `true` uses `--pds-card-pad`. |
| `style` | `CSSProperties` | no | — | — |
## Examples
### 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.
```tsx
import { Card, Bleed, Text } from "@protocore/pds";
export default function BleedBasics() {
return (
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.
```tsx
import { Card, Bleed, Text } from "@protocore/pds";
export default function BleedAxes() {
return (
A 24px inline bleed on an image strip:
);
}
```
## 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.
## Related
`card`, `container`, `spacer`, `aspect-ratio`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/