Design System

Bleed

Bleeds on all sides, background reaches the parent edges

1
<Bleed space="xx-large">
2
    <Box
3
        background="infoLight"
4
        padding="xx-large">
5
        <Text size="small">Bleeds on all sides, background reaches the parent edges</Text>
6
    </Box>
7
</Bleed>

Horizontal

TODO

Bleeds left and right only

Vertical

TODO

Bleeds top and bottom only

Individual directions

TODO

top only

bottom only

left only

right only

Prop precedence

Specific direction overrides axis, axis overrides "space". Here left="x-large" overrides horizontal="small", which overrides space="moderate" for top/bottom.

left=x-large · right=small · top/bottom=moderate

Responsive values

The "space" prop accepts responsive objects. Resize the window to see the effect.

Resize the window to see the bleed change

1
<Box
2
    padding="xx-large"
3
    background="neutralLight"
4
    borderRadius="md">
5
    <Bleed space={{ mobile: 'small', tablet: 'xx-large' }}>
6
        <Box
7
            background="infoLight"
8
            padding="xx-large">
9
            <Text size="small">Resize the window to see the bleed change</Text>
10
        </Box>
11
    </Bleed>
12
</Box>

as="span"

Renders both outer and inner elements as "span" with display: block. Used by Badge's "bleedY".

Span variant