Skip to Main Content
Concord
InfoComponentsUtilities
GitHubNPM

Alert

A notification or status message.

Statuses

To create an Alert, create a div with the class cd-alert. Inside it, create another div with the class cd-alert-content. Place the desired message inside the cd-alert-content element.

Every Alert must have exactly one status, which you can set by adding one of the following additional classes to the root element:

  • cd-status-info
  • cd-status-success
  • cd-status-warning
  • cd-status-error
No payment is due at this time.
Your profile was updated successfully.
Your connection is unstable.
Your request couldn't be processed at this time. Please try again later.
HTMLCopied!
<div class="cd-alert cd-status-info">
  <div class="cd-alert-content">
    No payment is due at this time.
  </div>
</div>
<div class="cd-alert cd-status-success">
  <div class="cd-alert-content">
    Your profile was updated successfully.
  </div>
</div>
<div class="cd-alert cd-status-warning">
  <div class="cd-alert-content">
    Your connection is unstable.
  </div>
</div>
<div class="cd-alert cd-status-error">
  <div class="cd-alert-content">
    Your request couldn't be processed at this time. Please
    try again later.
  </div>
</div>

Subtle

To make an Alert less visually prominent, add the cd-variant-subtle class to its root element.

No payment is due at this time.
Your profile was updated successfully.
Your connection is unstable.
Your request couldn't be processed at this time. Please try again later.
HTMLCopied!
<div class="cd-alert cd-status-info cd-variant-subtle">
  <div class="cd-alert-content">
    No payment is due at this time.
  </div>
</div>
<div class="cd-alert cd-status-success cd-variant-subtle">
  <div class="cd-alert-content">
    Your profile was updated successfully.
  </div>
</div>
<div class="cd-alert cd-status-warning cd-variant-subtle">
  <div class="cd-alert-content">
    Your connection is unstable.
  </div>
</div>
<div class="cd-alert cd-status-error cd-variant-subtle">
  <div class="cd-alert-content">
    Your request couldn't be processed at this time. Please
    try again later.
  </div>
</div>

Title

To add a title to an Alert, add the class cd-alert-title to the first child of the cd-alert-content element.

Fun Fact

The tip of a shoelace is called an aglet.

HTMLCopied!
<div class="cd-alert cd-status-info">
  <div class="cd-alert-content">
    <p class="cd-alert-title">Fun Fact</p>
    <p>The tip of a shoelace is called an aglet.</p>
  </div>
</div>