# TEST Documentation - This has _only_ documentation, no live examples
A flexible and accessible alert component for displaying contextual messages with support for multiple status variants.
## Features
- **Multiple Status Variants**: Support for success, info, and error states with distinct styling
- **Icon Support**: Optional icon display for visual hierarchy
- **Customizable Title**: Optional title with semantic heading
- **Accessible**: Built with proper ARIA roles and semantic HTML
- **CSS Variables**: Fully customizable via CSS custom properties
## Usage
### Nunjucks Macro
```nunjucks
{% import "@tresinternet-umbraco-library/use-alert/macro.njk" as alert %}
<h2>Default Alert</h2>
{{ alert.default(
type = "success",
title = "Success!",
content = "Your changes have been saved.",
iconSource = "2_default/check-circle"
) }}
```
### Macro Parameters
- **type** (string, optional): Status variant - `"default"`, `"success"`, `"info"`, or `"error"`. Defaults to `"default"`
- **title** (string, optional): Heading text for the alert. If empty, no heading is displayed
- **content** (string, optional): Main message content. Defaults to Lorem ipsum placeholder
- **iconSource** (string, optional): Icon alias to display. If `false`, no icon is shown
## Status Variants
- **default**: Standard alert styling with default border color
- **success**: Green-accented alert for positive actions or confirmations
- **info**: Blue-accented alert for informational messages
- **error**: Red-accented alert for errors or critical warnings
## Styling
The component uses CSS custom properties for full customization. Default values inherit from the theme tokens:
### Core Variables
- `--_alert-spacing`: Padding (default: `var(--spacing-sm)`)
- `--_alert-border-color`: Border color (default: `var(--theme-border-color)`)
- `--_alert-border-radius`: Border radius (default: `var(--theme-border-radius)`)
- `--_alert-box-shadow`: Shadow effect (default: `var(--theme-box-shadow)`)
- `--_alert-bgcolor`: Background color (default: `var(--color-transparent)`)
- `--_alert-title-size`: Title font size (default: `var(--fontsize-introtext)`)
### Layout Variables
- `--_alert-border-width`: Border thickness (default: `2px`)
- `--_alert-gap-vertical`: Vertical gap between items (default: `1rem`)
- `--_alert-gap-horizontal`: Horizontal gap between items (default: `0.5rem`)
- `--_alert-icon-size`: Icon width (default: `2rem`)
### Example Custom Styling
```scss
.alert {
--_alert-spacing: 1.5rem;
--_alert-border-width: 1px;
--_alert-border-radius: 8px;
}
```
## Accessibility
- Semantic `<role="alert">` attribute for screen readers
- Proper heading hierarchy with `<h2>` for titles
- Descriptive text using `<p>` tags
- Icon support for visual distinction without relying solely on color