Bleed

Used to break an element from the boundaries of its container

Import

import { Bleed } from 'styled-system/jsx'

The Bleed pattern is used to create a full width element by negating the padding applied to its parent container.

Loading example...

Use the block prop to make the element bleed vertically.

Loading example...

Use the inline and block props to make the element bleed in a specific direction.

Loading example...

The Bleed component accepts the following utility props in addition to style and factory props:

Prop	Type	Description
`inline`	`SystemStyleObject['marginInline']`	The negative margin on the x-axis.
`block`	`SystemStyleObject['marginBlock']`	The negative margin on the y-axis.

On this page

import { Bleed } from 'styled-system/jsx'

The Bleed pattern is used to create a full width element by negating the padding applied to its parent container.

Bleed

This is some descriptive content of the heading.

Loading example...

Use the block prop to make the element bleed vertically.

Bleed

Loading example...

Use the inline and block props to make the element bleed in a specific direction.

inline

block

Loading example...

The Bleed component accepts the following utility props in addition to style and factory props:

Prop	Type	Description
`inline`	`SystemStyleObject['marginInline']`	The negative margin on the x-axis.
`block`	`SystemStyleObject['marginBlock']`	The negative margin on the y-axis.