<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="robots" content="noindex,nofollow">

  <title>Alerts</title>
  <link rel="stylesheet" href="/example/assets/stylesheets/style.css?5062960">

  <!--
    Inlined Google Font loading
    ===========================
    Steps:
    1) Select fonts from Google Fonts
    2) Open the url (example: //fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto:400,400i,700,700i&display=swap )
    3) Grab all the @font-faces from the latin and latin-ext range
    4) Minify the CSS and place inline

    REMOVE THIS COMMENT IN PRODUCTION!!!
-->
  <style>
    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: 400;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: 400;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: 700;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: 700;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: Roboto;
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: Roboto;
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: Roboto;
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: Roboto;
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: Roboto;
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: Roboto;
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: Roboto;
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: Roboto;
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }
  </style>

  <script>
    function loadScript(src, callback) {
      var script = document.createElement('script');
      script.setAttribute('defer', '');
      script.src = src;

      script.onload = function () {
        callback && callback(null, script);
      }
      script.onerror = function () {
        callback && callback(new Error('Script load error for ' + src));
      }

      document.getElementsByTagName("head")[0].appendChild(script);
    }
  </script>

</head>
<body class="component">
		
			<component>




	<div class="band band--spacing" >
		<div class="band__content flow">
				


	<div class="alert" role="status">
		
		<p class="text-preset-small">Lorem ipsum dolor sit amet consectetur adipiscing elit vulputate, turpis fringilla nunc hendrerit vehicula torquent ridiculus, ad scelerisque dapibus aenean urna litora ultrices.</p>
	</div>




	<div class="alert" role="status">
		
			<h2 class="title title--alert">Lorem ipsum dolor sit amet</h2>
		<p class="text-preset-small">Lorem ipsum dolor sit amet consectetur adipiscing elit vulputate, turpis fringilla nunc hendrerit vehicula torquent ridiculus, ad scelerisque dapibus aenean urna litora ultrices.</p>
	</div>



			</div>
	</div>


</component>
		
		
			<description style="display: none;">
<h2>Default</h2>
</description>
		
		
			<instructions style="display: none;">
				
# 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 &quot;@tresinternet-umbraco-library/use-alert/macro.njk&quot; as alert %}

&lt;h2&gt;Default Alert&lt;/h2&gt;

{{ alert.default(
  type = &quot;success&quot;,
  title = &quot;Success!&quot;,
  content = &quot;Your changes have been saved.&quot;,
  iconSource = &quot;2_default/check-circle&quot;
) }}
```

### Macro Parameters

- **type** (string, optional): Status variant - `&quot;default&quot;`, `&quot;success&quot;`, `&quot;info&quot;`, or `&quot;error&quot;`. Defaults to `&quot;default&quot;`
- **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 `&lt;role=&quot;alert&quot;&gt;` attribute for screen readers
- Proper heading hierarchy with `&lt;h2&gt;` for titles
- Descriptive text using `&lt;p&gt;` tags
- Icon support for visual distinction without relying solely on color


			</instructions>
		
  <script src="/example/assets/scripts/script.js"></script>

</body>

</html>