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>.
<divclass="alert"><spanclass="d-icon d-domain"></span><div><h5>This is a default alert</h5></div><aclass="close is-secondary"><spanclass="d-icon d-close is-sub"></span></a></div><br><divclass="alert is-info"><spanclass="d-icon d-information-circle"></span><div><h5>This is an informational alert</h5></div><aclass="close is-secondary"><spanclass="d-icon d-close is-sub"></span></a></div><br><divclass="alert is-warning"><spanclass="d-icon d-warning"></span><div><h5>This is a warning alert</h5></div><aclass="close is-secondary"><spanclass="d-icon d-close is-sub"></span></a></div><br><divclass="alert is-success"><spanclass="d-icon d-check-circle"></span><div><h5>This is a success alert</h5></div><aclass="close is-secondary"><spanclass="d-icon d-close is-sub"></span></a></div><br><divclass="alert is-danger"><spanclass="d-icon d-stop-warning"></span><div><h5>This is a danger alert</h5></div><aclass="close is-secondary"><spanclass="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.
This is a danger alert
This domain can’t be deleted because there is another product using this domain.
<divclass="alert is-danger"><spanclass="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><aclass="close is-secondary"><spanclass="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.
Non-Production Instance: Do not use for Production or CI/CD (Screwdriver)
Non-Production Instance: Do not use for Production or CI/CD (Screwdriver)
Non-Production Instance: Do not use for Production or CI/CD (Screwdriver)
Non-Production Instance: Do not use for Production or CI/CD (Screwdriver)
Non-Production Instance: Do not use for Production or CI/CD (Screwdriver)
<divclass="alert is-inline"><p><spanclass="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p></div><br><divclass="alert is-inline has-bg-status-danger"><p><spanclass="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p></div><br><divclass="alert is-inline has-bg-status-success"><p><spanclass="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p></div><br><divclass="alert is-inline has-bg-status-warning"><p><spanclass="is-bold">Non-Production Instance:</span> Do not use for Production or CI/CD (Screwdriver)</p></div><br><divclass="alert is-inline has-bg-status-info"><p><spanclass="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.