Callouts

1> [!NOTE]  
2> This is a note callout with important information that users should know.

1> [!INFO]
2> Alternative info callout - same styling as NOTE.

1> [!ABSTRACT]
2> Use for abstracts, summaries, or TL;DR sections.

1> [!TODO]
2> This is something that needs to be done.

1> [!TIP]
2> Here's a helpful tip to make your workflow more efficient!

1> [!SUCCESS]
2> Great job! This operation completed successfully.

1> [!QUESTION]
2> What do you think about this approach? Let us know!

1> [!EXAMPLE]
2> Here's a practical example of how to implement this feature.

1> [!QUOTE]
2> "The best way to predict the future is to invent it." - Alan Kay

1> [!WARNING]
2> Be careful! This action might have unexpected consequences.

1> [!CAUTION]
2> Danger! This operation is irreversible and could cause data loss.

1> [!IMPORTANT]
2> This is critical information that users must understand to proceed.

1> [!DANGER]
2> This is extremely dangerous - proceed with extreme caution!

1> [!FAILURE]
2> This operation failed. Check your configuration and try again.

1> [!BUG]
2> Known issue: This feature doesn't work properly in Safari < 14.

1> [!WARNING]+ Custom Warning Title
2> This warning has a custom title instead of just "Warning".

1{{< callout note >}}
2This still works but is deprecated. Use the Markdown syntax above!
3{{< /callout >}}

 1/* Customize NOTE callouts */
 2.callout[data-callout="note"] {
 3  border-left-width: 8px;
 4  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
 5}
 6
 7/* Make SUCCESS callouts pulse */
 8.callout[data-callout="success"] {
 9  animation: pulse 2s infinite;
10}
11
12/* Custom icon styling */
13.callout-icon svg {
14  transition: transform 0.2s;
15}
16
17.callout:hover .callout-icon svg {
18  transform: scale(1.1);
19}
20
21/* Dark mode overrides */
22@media (prefers-color-scheme: dark) {
23  .callout[data-callout="warning"] {
24    background-color: rgb(92 25 2);
25    border-color: rgb(245 158 11);
26  }
27}