• Box For custom layouts.
Applies a negative margin to allow the content to bleed out into a the surrounding layout. As such it is important to ensure that size and direction of the bleed is accommodated by the parent layout.
All bleed directions accept values from the space scale, including support for responsive values, e.g. vertical={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
Multiple bleed values can be applied to achieve the desired result, much like paddings and margins, with the specific direction overriding the individual axis, which overrides the space prop.
Contents will bleed into the surrounding layout vertically using the vertical prop.
Contents will bleed into the surrounding layout horizontally using the horizontal prop.
Contents will bleed into the surrounding layout in a specified direction using the top, bottom, left, or right prop.
top
bottom
left
right
Contents will bleed into the surrounding layout in all directions using the space prop.