ComponentsLayout

Admonition

An admonition is usually used to draw attention to a specific subset of your content. The primary content is passed in as a child, but quite a few additional properties are available to configure the layout and appearance of the admonition as well. Both the title and footer can contain markdown, but be sure to escape your backslashes by adding another backslash. As mentioned in the intro to jsx documentation, this is a limitation of javascript as a whole, and applies to most programming languages where a backslash is required inside of a string.

<Admonition 
title="Mass Equivalency: $e=mc^2$" 
footer="Man that Einstein guy was smart."
type="info"
dropdown
>
   Following from the 1905 publication of _On the electrodynamics of moving bodies_, Einstein offered a follow up paper, _On the relativity principle and the conclusions drawn from it_ in 1907. 
</Admonition>

Output

You can find demos of the other types here

Mass Equivalency:

Following from the 1905 publication of On the electrodynamics of moving bodies, Einstein offered a follow up paper, On the relativity principle and the conclusions drawn from it in 1907.

Man that Einstein guy was smart.

Properties

PropTypeDefault
type
AdmonitionType
-
title
any
-
footer
any
-
children
any
-
dropdown
boolean
-
sidebar
boolean
-
open
boolean
-
titleBold
boolean
-
id
string
-
noParse
boolean
-
icon
string | false
-
center
boolean
-
titleBg
ColorGroupItem
-
titleFg
ColorGroupItem
-
bg
ColorGroupItem
-

On this page