Skip to content

Block Component

The Block component creates Beamer-style colored blocks for highlighting important content.

Basic Usage

markdown
<Block type="info" title="Important Note">

Your content here...

</Block>

Or using the syntax sugar:

markdown
:::block{type="info" title="Important Note"}
Your content here...
:::

Available Types

TypeColorUse Case
defaultGrayGeneral information
infoBlueInformational content
successGreenPositive results
warningYellowCautions
dangerRedCritical warnings
exampleCyanExamples
alertPinkAlerts

Examples

Information Block

markdown
:::block{type="info" title="Research Finding"}
Our study shows a significant improvement in accuracy.
:::

Warning Block

markdown
:::block{type="warning" title="Limitation"}
This method requires large amounts of training data.
:::

Example Block

markdown
:::block{type="example" title="Case Study"}
Consider the function $f(x) = x^2$...
:::

Props

PropTypeDefaultDescription
typestring'default'Block style type
titlestring-Optional title for the block