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.

Bleed

Some Heading

This is some descriptive content of the heading.

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>
  )
}

Vertical

Use the block prop to make the element bleed vertically.

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>
  )
}

Specific Direction

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

inline

block

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>
  )
}

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