Alert

Open this example in a new tab: alert

<div class="alert alert--success">
  <h1 class="alert__title">Alert title</h1>
  <div class="alert__content">
    <p>Alert content (html) with a <a href="#">link</a></p>
          <p>With additional line. modifier: success</p>
  </div>
</div>

{% from "alert/macro.njk" import aspAlert %}

{{ aspAlert({
  modifier: "success",
  title: "Alert title",
  content: {
    html: '<p>Alert content (html) with a <a href="#">link</a></p>
      <p>With additional line. modifier: success</p>'  
  }
}) }}

Open this example in a new tab: alert

<div class="alert alert--warning">
  <div class="alert__content">
    <p>Alert content (text) without a title. modifier: warning</p>
  </div>
</div>

{% from "alert/macro.njk" import aspAlert %}

{{ aspAlert({
  modifier: "warning",
  content: {
    text: "Alert content (text) without a title. modifier: warning"
  }
}) }}

Open this example in a new tab: alert

<div class="alert alert--danger">
  <div class="alert__content">
    <p>Alert content (text) without a title. modifier: danger</p>
  </div>
</div>

{% from "alert/macro.njk" import aspAlert %}

{{ aspAlert({
  modifier: "danger",
  content: {
    text: "Alert content (text) without a title. modifier: danger"
  }
}) }}