Bleed

Sometimes a component needs to trespass the parent padding to achieve alignment harmony and visual compensation to the layout. You can accomplish this with Bleed, which applies a negative margin to represent the amount of trespassing desired.

Usage

function Example() {
  return (
    <Card>
      <Bleed>
        <img src="..." />
      </Bleed>
    </Card>
  )
}

Examples

Basic

Loading...

With Inline

Loading...

Props

Name	Type	Description	Required	Default
top	VSpaceTokens or number	Top bleed	🚫	'0rem'
bottom	VSpaceTokens or number	Bottom bleed	🚫	'0rem'
left	HSpaceTokens or number	Left bleed	🚫	'0rem'
right	HSpaceTokens or number	Right bleed	🚫	'0rem'