Bleed

Used to break an element from the boundaries of its container

Panda

import { Bleed } from 'styled-system/jsx'

Usage

The Bleed pattern is used to create a full width element by negating the padding applied to its parent container.

Vertical

Use the block prop to make the element bleed vertically.

Specific Direction

Use the inline and block props to make the element bleed in a specific direction.

Props

Prop	Type	Description
`inline`	`SystemStyleObject['marginInline']`	The negative margin on the x-axis.
`block`	`SystemStyleObject['marginBlock']`	The negative margin on the y-axis.

On this page

Edit this page on Github

Cerberus Design System | Docs

Bleed

import { DecorativeBox } from '@/app/components/decorative-box'
import { Bleed, Box } from 'styled-system/jsx'

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

import { DecorativeBox } from '@/app/components/decorative-box'
import { Bleed, Box, VStack } from 'styled-system/jsx'

export function DirectionDemo() {
  return (
    <VStack gap="8">
      <Box padding="8" rounded="sm" borderWidth="1px">
        <Bleed inline="8">
          <DecorativeBox height="8">inline</DecorativeBox>
        </Bleed>
      </Box>

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

import { Bleed, Box, VStack } from 'styled-system/jsx'
import { Text } from '@cerberus/react'
import { DecorativeBox } from '@/app/components/decorative-box'

export function BasicDemo() {
  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>
  )
}