BRAID
Braid Logo
 

Bleed

Open in Playroom
The Bleed component allows its content to extend out into the surrounding layout. As such, it is important to ensure that size and direction of the bleed is accommodated by the parent layout.

Alternatives

  • Box — For custom layouts.

Design considerations

Applies a negative margin to allow the content to bleed out into the surrounding 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.

Vertical

Contents will bleed into the surrounding layout vertically using the vertical prop.
vertical
Open in Playroom

Horizontal

Contents will bleed into the surrounding layout horizontally using the horizontal prop.
horizontal
Open in Playroom

Specific direction

Contents will bleed into the surrounding layout in a specified direction using the top, bottom, left, or right prop.
top
bottom
left
right
Open in Playroom

All directions

Contents will bleed into the surrounding layout in all directions using the space prop.
all directions
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Bleed
  data={{ testid: 'bleed-1' }}
  // => data-testid="bleed-1"
>
  ...
</Bleed>
Open in Playroom