Informational Components
Here are Markdown-style examples for Informational/Callout Components. These assume you're using an MDX-based system or CMS that supports custom callouts (like > syntax with keywords or custom components):
Neutral (neutral info box)
- Example
Important
Make sure to back up your data before performing this action.
- Syntax
neutral.mdx> ## Important
>
> Make sure to back up your data before performing this action.Informational
- Example
Note
You can update your profile at any time from the settings page.
- Syntax
informational.mdx> ## Note
>
> You can update your profile at any time from the settings page.Warning / Caution (alert box with minor severity)
- Example
Warning
This action will overwrite existing files. Proceed with caution.
Caution
This action will overwrite existing files. Proceed with caution.
Warn
This action will overwrite existing files. Proceed with caution.
Alert
This action will overwrite existing files. Proceed with caution.
- Syntax
callout-warning.mdx> ## Warning
>
> This action will overwrite existing files. Proceed with caution.
> ## Caution
>
> This action will overwrite existing files. Proceed with caution.
> ## Warn
>
> This action will overwrite existing files. Proceed with caution.
> ## Alert
>
> This action will overwrite existing files. Proceed with caution.Error (critical or failure state)
- Example
Danger
This action will overwrite existing files. Proceed with caution.
Error
This action will overwrite existing files. Proceed with caution.
Failure
This action will overwrite existing files. Proceed with caution.
Critical
This action will overwrite existing files. Proceed with caution.
- Syntax
callout-error.mdx> ## Danger
>
> This action will overwrite existing files. Proceed with caution.
> ## Error
>
> This action will overwrite existing files. Proceed with caution.
> ## Failure
>
> This action will overwrite existing files. Proceed with caution.
> ## Critical
>
> This action will overwrite existing files. Proceed with caution.Success (positive reinforcement)
- Example
Success
Your changes have been saved successfully.
Tip
Your changes have been saved successfully.
- Syntax
callout-success.mdx> ## Success
>
> Your changes have been saved successfully.
> ## Tip
>
> Your changes have been saved successfully.QuoteCard (citation/testimonial format)
- Example
❝The modularity and speed of this platform make it a perfect choice for modern scientific publishing.❞
- Syntax
quotecard.mdx<QuoteCard
name="Dr. Jane Doe"
title="Astrophysicist, MIT"
avatar="/images/dr-jane.jpg"
>
❝The modularity and speed of this platform make it a perfect choice for modern scientific publishing.❞
</QuoteCard>