This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Bleed

Version: 0.132.0

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

NameTypeDescriptionRequiredDefault
topVSpaceTokens or numberTop bleed🚫'0rem'
bottomVSpaceTokens or numberBottom bleed🚫'0rem'
leftHSpaceTokens or numberLeft bleed🚫'0rem'
rightHSpaceTokens or numberRight bleed🚫'0rem'