Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting .

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

NameTypeDefault
fullboolean

Extend content to the very edges of its container.

...propsHTMLAttributes<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>:

Nextra

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>