Bleed

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

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

<Bleed>
  <div />
</Bleed>

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

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