`Bleed` Component

A built-in component to slightly expand content beyond the container’s width, <Bleed> allows it to overflow on both sides.

It’s ideal for enhancing the presentation of graphical elements, offering a more immersive and visually appealing reading experience.

Exported from nextra/components.

Props

Name	Type	Default
`full`	`boolean` Extend content to the very edges of its container.
`...props`	`HTMLAttributes<HTMLDivElement>`

Example

You can put text, image, video or any component inside.

Text

There is nothing to writing. All you do is sit down at a typewriter and bleed.

— Ernest Hemingway

Video

Full-bleed

You can even make it full-bleed by using <Bleed full>:

Usage

MDX


import { Bleed } from 'nextra/components'
 
<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
 
<Bleed full>![Nextra](https://nextra.site/og.jpeg)</Bleed>
 
<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>

Bleed Component