Callout – Nextra

The Callout Component

The Callout component is a simple component that can be used to highlight important information. See Documentation>Guide>Built-ins>Callout (opens in a new tab):

import { Callout } from 'nextra/components'
 
<Callout type="info" emoji="ℹ️">
  More about translators can be found
  [here](/labs/arith2js).
</Callout>

ℹ️

More about translators can be found here.

Example

<Callout type="error" emoji="️🎓">
  Any `.md` or `.mdx` file will turn into a doc page and be displayed in
  sidebar. You can also create a `meta.json` file to customize the page order
  and title. <br /> Check the source code: https://github.com/shuding/nextra for
  more information.
</Callout>

<Callout type="warning">
You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
</Callout>

Becomes:

️🎓

Any .md or .mdx file will turn into a doc page and be displayed in sidebar. You can also create a meta.json file to customize the page order and title.
Check the source code: https://github.com/shuding/nextra (opens in a new tab) for more information.

⚠️

You can also use <style jsx> (opens in a new tab) to style elements inside theme.config.js.

Bleed Cards