graphql-engine/docs/wiki/docusaurus-mdx-guide/admonitions.mdx

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Admonitions

Call-out admonitions allow you to highlight parts of the documentation which require special attention or which
don't fit in the usual flow of content.

```markdown
:::note

**This** is an example of a call-out admonition. For more info please get in touch with us on [Discord]
(https://discord.gg/vBPpJkS).

:::
```

```markdown
:::note Additional Resources

Data Federation with Hasura - [Watch Webinar](https://hasura.io/events/webinar/data-federation-hasura-graphql/).

:::
```

:::caution Please note the empty lines

Please ensure to leave empty lines in the start and the end (first and last lines). This to avoid prettier messing
up the formatting in this Docusaurus special syntax.

Read about it on the [Docusaurus Docs](https://docusaurus.io/docs/markdown-features/admonitions#usage-with-prettier)

:::

```diff {1,3,5,7}
+
:::info Note
+
Make sure to place the note/admonition in a place where the user will see it at the appropriate time.
+
:::
+
```

which would render as below

:::note

**Adding an additional layer on top of the Hasura GraphQL Engine significantly impacts the performance provided by it
out of the box** (_by as much as 4x_). If you need any help with remodeling these kinds of use cases to use the built-in
Remote Schemas feature, please get in touch with us on [Discord](https://discord.gg/vBPpJkS).

:::

:::note Additionl Resources

Data Federation with Hasura - [Watch Webinar](https://hasura.io/events/webinar/data-federation-hasura-graphql/).

:::

<hr />

Please prefer `:::info Note` over `:::note` for a decent blue colored note.

:::info Note

For further syntax and usage reference please check docusaurus
[Admonitions docs](https://docusaurus.io/docs/markdown-features/admonitions)

:::