Alert SpellBlock Showcase
The Alert SpellBlock is a versatile component for highlighting important information in your documentation. This guide demonstrates all the capabilities and variations of the Alert block.
Basic Alert Types
Alerts come in four standard types, each with its own color scheme and icon to convey different levels of importance.
Info Alert (Default)
The default alert type is "info" - used for general information and notes.
{~ alert ~}
This is a standard info alert without specifying a type.
{~~}
This is a standard info alert without specifying a type.
Success Alert
Success alerts highlight positive messages, accomplishments, or correct approaches.
{~ alert type="success" ~}
Great job! Your operation completed successfully.
{~~}
Great job! Your operation completed successfully.
Warning Alert
Warning alerts call attention to potential issues or things to be careful about.
{~ alert type="warning" ~}
Be careful! This action can't be undone.
{~~}
Be careful! This action can't be undone.
Danger Alert
Danger alerts highlight critical information or error conditions.
{~ alert type="danger" ~}
Fatal error! Database connection failed.
{~~}
Fatal error! Database connection failed.
Formatting Inside Alerts
Alerts support full markdown formatting within their content, allowing rich text presentation.
Text Formatting
{~ alert ~}
You can use **bold**, *italic*, and `code` formatting inside alerts.
Even [links](https://example.com) work perfectly!
{~~}
You can use bold, italic, and code formatting inside alerts.
Even links work perfectly!
Lists in Alerts
{~ alert type="success" ~}
Follow these steps:
1. Install the package
2. Configure settings
3. Run migrations
Or alternatively:
* Use the quickstart script
* Follow the prompts
{~~}
Follow these steps:
- Install the package
- Configure settings
- Run migrations
Or alternatively:
* Use the quickstart script
* Follow the prompts
Customizing Alerts
TODO: Adding Custom Classes
You can add custom CSS classes to further style your alerts:
{~ alert type="warning" class="sb-p-4 sb-my-4" ~}
This alert has custom spacing.
{~~}
This alert has custom spacing.
TODO: Adding a Title
You can add a title to your alert for additional context:
{~ alert type="info" title="Installation Note" ~}
This feature requires Django 3.2 or higher.
{~~}
This feature requires Django 3.2 or higher.
TODO: Dismissible Alerts
Make alerts dismissible with the dismissible parameter:
{~ alert type="success" dismissible="true" ~}
Click the X to dismiss this alert!
{~~}
Click the X to dismiss this alert!
Best Practices
When to Use Alerts
Alerts are perfect for:
* Important notes and warnings
* Highlighting key information
* Providing tips and best practices
* Pointing out version-specific information
Keep alerts brief and focused for maximum impact.
Alert Overuse
Too many alerts can cause "alert fatigue" - where readers start to ignore them.
Use alerts purposefully and sparingly for the most important information.
Error Handling
If you specify an invalid alert type, it will default to the "info" type:
{~ alert type="not-a-valid-type" ~}
This will render as an info alert.
{~~}
This will render as an info alert.
Alert Practice Challenge
Try creating your own alert blocks:
- Create an info alert about a feature you're working on
- Create a warning alert about potential pitfalls
- Create a success alert with a list of benefits
- Create a danger alert with code showing an anti-pattern
Experiment with different formatting inside your alerts!