Bleed

Used to break an element from the boundaries of its container

Source: packages/chakra-ui-solid/src/components/bleedChakra UI ↗

Bleed

Some Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

import { Bleed, Box, Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function BleedBasic() {
  return (
    <Box padding="10" rounded="sm" borderWidth="1px">
      <Bleed inline="10">
        <DecorativeBox height="20">Bleed</DecorativeBox>
      </Bleed>

      <Stack mt="6">
        <Box as="h3" fontSize="lg" fontWeight="semibold">
          Some Heading
        </Box>
        <Box as="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Box>
      </Stack>
    </Box>
  );
}

Usage

import { Bleed } from "chakra-ui-solid";

<Bleed>
  <div />
</Bleed>

Examples

Vertical

Use the block prop to make the element bleed vertically.

Bleed

import { Bleed, Box } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function BleedVertical() {
  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.

inlineStart

inlineEnd

blockStart

blockEnd

import { Bleed, Box, Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function BleedWithDirection() {
  return (
    <Stack 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>
    </Stack>
  );
}

Props

Prop	Default	Type
`block`	—	`string \| number` How far to break out on both block edges — a spacing token like `"10"`, or a CSS length.
`blockEnd`	—	`string \| number` How far to break out on the block-end edge (the bottom).
`blockStart`	—	`string \| number` How far to break out on the block-start edge (the top).
`inline`	—	`string \| number` How far to break out on both inline edges — a spacing token like `"10"`, or a CSS length.
`inlineEnd`	—	`string \| number` How far to break out on the inline-end edge (right in a left-to-right document).
`inlineStart`	—	`string \| number` How far to break out on the inline-start edge (left in a left-to-right document).
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: Omit<HTMLChakraProps<"div">, keyof BleedOptions>. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.