Homecomponentsstructural

Bleed

A container that extends its contents out of its bounds.

Use Bleed to make the contents extend out of the available space. This works as the opposite of Inset and is designed to visually break out of a parent container.

I bleed it out 🗣

Open in Playroom

Horizontal

Use horizontal to bleed out horizontally.

Horizontal

Open in Playroom

Vertical

Use vertical to bleed out vertically.

Vertical

Open in Playroom

Top

Use top to bleed out from the top.

Top

Open in Playroom

Right

Use right to bleed out to the right.

Right

Open in Playroom

Bottom

Use bottom to bleed out from the bottom.

Bottom

Open in Playroom

Left

Use left to bleed out to the left.

Left

Open in Playroom

All sides equally

Use space to bleed out from all sides.

All

Open in Playroom

Examples

A common use of Bleed is to break images out of container to make them stand out.

Open in Playroom

API

children

Required

The content to bleed.

ReactNode

space

The amount of bleed to apply.

ResponsiveValue

vertical

The amount of bleed to apply to the horizontally.

ResponsiveValue

horizontal

The amount of bleed to add vertically.

ResponsiveValue

top

The amount of bleed to apply to the top.

ResponsiveValue

bottom

The amount of bleed to apply to the bottom.

ResponsiveValue

left

The amount of bleed to apply to the left.

ResponsiveValue

right

The amount of bleed to apply to the right.

ResponsiveValue

asChild

Absorb the child along with their styles. This is usually used to combine components together.

true

false

data

An object with the data keys and values.

DataAttributeMap