Bleed

Used to break an element from the boundaries of its container

Bleed

Some Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Usage

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

<Bleed>
  <div />
</Bleed>

Examples

Vertical

Use the block prop to make the element bleed vertically.

Bleed

Specific Direction

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

inlineStart

inlineEnd

blockStart

blockEnd

Props

BleedProps
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).

Plus Omit<HTMLChakraProps<"div">, keyof BleedOptions> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.