Built-In Components

Some helpful built-in components from nextra-theme-docs.

Callout

Example

💡

A callout is a short piece of text intended to attract attention.

🦤

The dodo is an extinct flightless bird that was endemic to the island of Mauritius, east of Madagascar in the Indian Ocean.

Usage

import Callout from 'nextra-theme-docs/callout'

<Callout emoji="🦤">
  The **dodo** is an extinct flightless bird.
</Callout>

Bleed

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

Landscape

Usage

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"
   ></iframe>
</Bleed>