Lorem ipsum dolor sit amet consectetur adipiscing elit vulputate, turpis fringilla nunc hendrerit vehicula torquent ridiculus, ad scelerisque dapibus aenean urna litora ultrices.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit vulputate, turpis fringilla nunc hendrerit vehicula torquent ridiculus, ad scelerisque dapibus aenean urna litora ultrices.

Default

 # Alert Component 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 ```js {% 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