Bleed

A built-in component provided by nextra-theme-docs.

Example

When wrapping your content with <Bleed>, it will be slightly wider than the container and will overflow on both sides.

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

— Ernest Hemingway

It provides a better reading experience when you want to present some graphical information, which normally looks nicer in a larger size.

For example, you can put text, image, video or any component inside:

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

Usage

MDX component

bleed.mdx

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

React Component

bleed.jsx

import { Bleed } from 'nextra-theme-docs'
 
<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>

Callout Tabs