Skip to main content

Alerts

Version: 0.9.0
Edit

Alert components notify the user of important messages or system feedback. There are currently four styles of alerts: informational, warning, danger, and success.

Alerts with icons have additional HTML structure so they can make use of the Media Object object. They also make use of the Pseudo Icon component. The Alert component controls the size of the icon.

The Alert component is built to accommodate any heading level. The appropriate HTML heading for the page outline should be used.

  • When to Use

    Alerting users to important system feedback and messages.

    • To indicate errors, successful form submissions, system outages, etc.

  • When not to Use

    • To provide a colorful container for page content

Alert

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L9

Default Alert

No Results

<!-- alert -->
<div class="c-alert">
  <h2 class="c-alert__title">Default Alert</h2>
  <p class="c-alert__copy">No Results</p>
</div>

Danger Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L54

Danger Alert

Danger, Will Robinson!

<!-- danger alert -->
<div class="c-alert c-alert--danger">
  <h2 class="c-alert__title">Danger Alert</h2>
  <p class="c-alert__copy">Danger, Will Robinson!</p>
</div>

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L77

Danger Alert

Danger, Will Robinson!

<!-- danger alert with icon -->
<div class="c-alert c-alert--danger o-media-object">
  <div class="o-media-object__media"><span class="icon-danger-stroke c-alert__icon" aria-hidden="true" focusable="false"><!--icon--></span></div>
  <div class="o-media-object__content">
    <h2 class="c-alert__title">Danger Alert</h2>
    <p class="c-alert__copy">Danger, Will Robinson!</p>
  </div>
</div>

Info Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L91

Info Alert

Just FYI, nbd.

<!-- info alert -->
<div class="c-alert c-alert--info">
  <h2 class="c-alert__title">Info Alert</h2>
  <p class="c-alert__copy">Just FYI, nbd.</p>
</div>

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L114

Info Alert

Just FYI, nbd.

<!-- info alert with icon -->
<div class="c-alert c-alert--info o-media-object">
  <div class="o-media-object__media"><span class="icon-info-stroke c-alert__icon" aria-hidden="true" focusable="false"><!--icon--></span></div>
  <div class="o-media-object__content">
    <h2 class="c-alert__title">Info Alert</h2>
    <p class="c-alert__copy">Just FYI, nbd.</p>
  </div>
</div>

Success Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L128

Success Alert

It worked!

<!-- success alert -->
<div class="c-alert c-alert--success">
  <h2 class="c-alert__title">Success Alert</h2>
  <p class="c-alert__copy">It worked!</p>
</div>

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L151

Success Alert

It worked!

<!-- success alert with icon -->
<div class="c-alert c-alert--success o-media-object">
  <div class="o-media-object__media"><span class="icon-success-stroke c-alert__icon" aria-hidden="true" focusable="false"><!--icon--></span></div>
  <div class="o-media-object__content">
    <h2 class="c-alert__title">Success Alert</h2>
    <p class="c-alert__copy">It worked!</p>
  </div>
</div>

Warning Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L165

Warning Alert

Uh oh, something's up.

<!-- warning alert -->
<div class="c-alert c-alert--warning">
  <h2 class="c-alert__title">Warning Alert</h2>
  <p class="c-alert__copy">Uh oh, something's up.</p>
</div>

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/alerts.scss#L188

Warning Alert

Uh oh, something's up.

<!-- warning alert with icon -->
<div class="c-alert c-alert--warning o-media-object">
  <div class="o-media-object__media"><span class="icon-warning-stroke c-alert__icon" aria-hidden="true" focusable="false"><!--icon--></span></div>
  <div class="o-media-object__content">
    <h2 class="c-alert__title">Warning Alert</h2>
    <p class="c-alert__copy">Uh oh, something's up.</p>
  </div>
</div>