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

VTEX is the Enterprise Digital Commerce Platform for brands and retailers looking to build a future-proof digital commerce strategy. Powered by a modern platform and a team of digital commerce experts, we enable enterprises to achieve faster time-to-market, reach their customers across any channel and uncover new areas of growth.

With Inline

Brazil

Argentina

Chile

Uruguai

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'