Get Started
Components
Styling
Theming

Bleed

Used to break an element from the boundaries of its container

import { Bleed, Box, VStack } from "styled-system/jsx"
import { Text } from "@cerberus/react"
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Box padding="10" rounded="sm" borderWidth="1px">
      <Bleed inline="10">
        <DecorativeBox height="20">Bleed</DecorativeBox>
      </Bleed>


      <VStack mt="6">
        <Text as="h1" size="md">Some Heading</Text>
        <Text>This is some descriptive content of the heading.</Text>
      </VStack>
    </Box>
  )
}

Usage

import { Bleed } from "styled-system/jsx";
<Bleed>
  <div />
</Bleed>

Examples

Vertical

Use the block prop to make the element bleed vertically.

import { Bleed, Box } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Box padding="10" rounded="sm" borderWidth="1px">
      <Bleed block="10">
        <DecorativeBox height="20">Bleed</DecorativeBox>
      </Bleed>
    </Box>
  )
}

Specific Direction

Use the inlineStart, inlineEnd, blockStart, and blockEnd props to make the element bleed in a specific direction.

import { Bleed, Box, VStack } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <VStack gap="8">
      <Box padding="8" rounded="sm" borderWidth="1px">
        <Bleed inlineStart="8">
          <DecorativeBox height="8">inlineStart</DecorativeBox>
        </Bleed>
      </Box>


      <Box padding="8" rounded="sm" borderWidth="1px">
        <Bleed inlineEnd="8">
          <DecorativeBox height="8">inlineEnd</DecorativeBox>
        </Bleed>
      </Box>


      <Box padding="8" rounded="sm" borderWidth="1px">
        <Bleed blockStart="8">
          <DecorativeBox height="8">blockStart</DecorativeBox>
        </Bleed>
      </Box>


      <Box padding="8" rounded="sm" borderWidth="1px">
        <Bleed blockEnd="8">
          <DecorativeBox height="8">blockEnd</DecorativeBox>
        </Bleed>
      </Box>
    </VStack>
  )
}

Props

PropTypeDescription
inlineSystemStyleObject['marginInline']The negative margin on the x-axis.
blockSystemStyleObject['marginBlock']The negative margin on the y-axis.
inlineStartSystemStyleObject['marginInlineStart']The negative margin on the inline start axis.
inlineEndSystemStyleObject['marginInlineEnd']The negative margin on the inline end axis.
blockStartSystemStyleObject['marginBlockStart']The negative margin on the block start axis.
blockEndSystemStyleObject['marginBlockEnd']The negative margin on the block end axis.

On this page