Skip to content

Latest commit

 

History

History
83 lines (61 loc) · 1.8 KB

bleed.mdx

File metadata and controls

83 lines (61 loc) · 1.8 KB
Raw

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.

import Bleed from 'nextra-theme-docs/bleed'

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

<iframe width="100%" height="430" src="https://www.youtube.com/embed/3hccXiXI0u8" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullscreen />

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

![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)

Usage

MDX component

<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>

<Bleed full>
  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
</Bleed>

<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>

React Component

import Bleed from 'nextra-theme-docs/bleed'

<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>

<Bleed full>
  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
</Bleed>

<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>