Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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>

Variables

You can use these variables in a override.css file to customize this component.

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-top padding-top
--alert-inline-padding-right padding-right
--alert-inline-padding-bottom padding-bottom
--alert-inline-padding-left padding-left