mirror this repo: https://github.com/The-Run-Philosophy-Organization/run.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.4 KiB
62 lines
1.4 KiB
# Bleed
|
|
|
|
A built-in component provided by `nextra-theme-docs`.
|
|
|
|
## Example
|
|
|
|
import Bleed from 'nextra-theme-docs/bleed'
|
|
|
|
When wrapping your content with `<Bleed>`, it will be slightly wider than the container
|
|
and will overflow on both sides.
|
|
|
|
<Bleed>
|
|
<div style={{ border: '1px solid #888', padding: '4rem 2.5rem', textAlign: 'center' }}>
|
|
_There is nothing to writing. All you do is sit down at a typewriter and **bleed**._
|
|
|
|
— Ernest Hemingway
|
|
|
|
</div>
|
|
</Bleed>
|
|
|
|
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:
|
|
|
|
<Bleed>
|
|
<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
|
|
/>
|
|
</Bleed>
|
|
|
|
You can even make it full-bleed using `<Bleed full>`:
|
|
|
|
<Bleed full>
|
|
|
|
</Bleed>
|
|
|
|
## Usage
|
|
|
|
```mdx
|
|
import Bleed from 'nextra-theme-docs/bleed'
|
|
|
|
<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
|
|
|
|
<Bleed full>
|
|
|
|
</Bleed>
|
|
|
|
<Bleed full>
|
|
<iframe
|
|
src="https://codesandbox.io/embed/swr-states-4une7"
|
|
width="100%"
|
|
height="500px"
|
|
title="SWR-States"
|
|
></iframe>
|
|
</Bleed>
|
|
```
|
|
|