Aside component

To display secondary information alongside a page’s main content, use the <Aside> component. It is a wrapper over built-in Callout components provided by Mintlify, but with an unified interface and a way to specify a title.

Import

import { Aside } from '/snippets/aside.jsx';

Usage

Display an aside (also known as “admonitions” or “callouts”) using the <Aside> component. An <Aside> can have an optional type attribute, which controls the aside’s color, icon, and default title.

import { Aside } from '/snippets/aside.jsx';

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

  Other content is also supported in asides.

  ```js
  // A code snippet, for example.
  ```

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

Use custom titles

Override the default aside titles by using the title attribute.

Watch out!

import { Aside } from '/snippets/aside.jsx';

<Aside type="caution" title="Watch out!">
  A warning aside _with_ a custom title.
</Aside>

`<Aside>` props

Implementation: aside.jsx The <Aside> component accepts the following props:

`type`

type: "note" | "tip" | "caution" | "danger"
default: "note" The type of aside to display:

note asides (the default) are blue and display an information icon.
tip asides are purple and display a rocket icon.
caution asides are yellow and display a triangular warning icon.
danger asides are red and display an octagonal warning icon.

`title`

type: string The title of the aside to display. If title is not set, the default title for the current aside type will be used.

Step-by-step guides

Ecosystem

Standard contracts

Contract patterns

Languages

TVM: TON Virtual Machine

Blockchain foundations

Web3 services

Contribute

Import

Usage

Use custom titles

`<Aside>` props

`type`

`title`

​Import

​Usage

​Use custom titles

​<Aside> props

​type

​title

Import

Usage

Use custom titles

`<Aside>` props

`type`

`title`