/
bleed.mdx.temp
62 lines (45 loc) · 1.41 KB
/
bleed.mdx.temp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# Bleed
A built-in component provided by `nextra-theme-docs`.
## Example
import { Bleed } from 'nextra-theme-docs'
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>
![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
</Bleed>
## Usage
```mdx
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>
```