Alerts

Alerts are used to provide feedback and information to users. They come in a variety of styles and colors to fit specific use cases.

Alert types

Denali offers five types of alerts: default, informational, success, warning, and danger. Implement different alert types by adding a .is-info, .is-success, .is-warning, or .is-danger class to an alert's outer <div>.



<div class="alert">
  <span class="d-icon d-domain"></span>
  <div>
    <h5 >This is a default alert</h5>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

<br>

<div class="alert is-info">
  <span class="d-icon d-information-circle"></span>
  <div>
    <h5 >This is an informational alert</h5>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

<br>

<div class="alert is-warning">
  <span class="d-icon d-warning"></span>
  <div><h5 >This is a warning alert</h5>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

<br>

<div class="alert is-success">
  <span class="d-icon d-check-circle"></span>
  <div><h5 >This is a success alert</h5>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

<br>

<div class="alert is-danger">
  <span class="d-icon d-stop-warning"></span>
  <div><h5 >This is a danger alert</h5>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

Alerts with context

Alerts with context contain text underneath the alert's headline. To implement alerts with context, wrap text within a <p> tag and insert it below the alert's <h5> tag.



<div class="alert is-danger">
  <span class="d-icon d-stop-warning"></span>
  <div>
    <h5 >This is a danger alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

Inline alerts

Inline alerts appear as a full-width bar at the top of their container. Implement inline alerts by adding the .is-inline modifier to an alert's outer <div> tag. The alert type classes listed above can also be added to inline alerts.



<div class="alert is-inline">
  <p><span class="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p>
</div>

<br>

<div class="alert is-inline has-bg-status-danger">
  <p><span class="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p>
</div>

<br>

<div class="alert is-inline has-bg-status-success">
  <p><span class="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p>
</div>

<br>

<div class="alert is-inline has-bg-status-warning">
  <p><span class="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p>
</div>

<br>

<div class="alert is-inline has-bg-status-info">
  <p><span class="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p>
</div>

Block Level

Block level alerts usually appear in the context of the page and span the full width of the parent container. They utilize the same HTML structure as noticiation alerts with context and all you have to do is add the class of is-block to the outer most element.



<div class="alert is-block">
  <span class="d-icon d-notification-solid"></span>
  <div>
    <h5>This is an informational alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
  <a class="close is-secondary"><span class="d-icon d-close is-sub"></span></a>
</div>

<br>

<div class="alert is-block is-info">
  <span class="d-icon d-information-circle-solid"></span>
  <div>
    <h5>This is a block level informational alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
</div>

<br>

<div class="alert is-block is-warning">
  <span class="d-icon d-warning-solid"></span>
  <div>
    <h5>This is a block level warning alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
</div>

<br>

<div class="alert is-block is-success">
  <span class="d-icon d-check-circle-solid"></span>
  <div>
    <h5>This is a block level success alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
</div>

<br>

<div class="alert is-block is-danger">
  <span class="d-icon d-stop-warning-solid"></span>
  <div>
    <h5>This is a block level danger alert</h5>
    <p>This domain can’t be deleted because there is another product using this domain.</p>
  </div>
</div>

Variables

You can use these variables to change the visual appearence when creating your own Denali themes in SCSS.

Variable Name CSS Property
$alert-bg-color background
$alert-text-color color
$alert-corner-radius border-radius
$alert-shadow box-shadow
$alert-border-color border-color
$alert-border-width border-width
$alert-border-style border-style
$alert-close-icon-color color
$alert-inline-text-color color
$alert-inline-bg-color background
$alert-inline-font-size font-size
$alert-inline-alignment-text text-align
$alert-inline-alignment-justify-content justify-content
$alert-inline-padding padding