Conveys important feedback information related to the state of the user's actions. It consists of an icon, a message, and ideally an external hyperlink to provide an alternative solution.

Aside from these configurable elements, the visual appearance of an alert call-out is static and can not be customized.

When to use

As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.
As a callout or notification for important or timely information. This includes errors, warnings, and general information.

Accessibility

Use the ARIA role="alert" to inform assistive technologies of a time-sensitive and important message.

Examples

Available for any length of content, along with a designated icon depends on which class you have used.

Success

<div class="d-flex flex-items-center bg-green-1 p-3 mt-3 mb-5" role="alert">
  <span class="fg-green-4 mr-2" data-icon="check"></span>
  <span>We found your address for the block and lot numbers.</span>
</div>

Informational

<div class="d-flex flex-items-center bg-blue-1 p-3 mt-3 mb-5" role="alert">
  <span class="fg-blue-4 mr-2" data-icon="alert"></span>
  <span>We found more than 1 address for the block and lot numbers.</span>
</div>

Failure

<div class="d-flex flex-items-center bg-red-1 p-3 mt-3 mb-5" role="alert">
  <span class="fg-red-4 mr-2" data-icon="delete"></span>
  <span>We cannot find that block and lot number. Look up your block and lot with your project address in <a href="https://sfplanninggis.org/pim/" target="_blank">our property information map</a>.</span>
</div>

Implementation

Under Shared resources, go to Components, select Informational alert or Ineligible alert
Edit the HTML element component

3. Do not make changes to Label, HTML Tag, and CSS Class

4. Under Content, only update the message within the second <span></span>

5. Save

SF.gov wiki (public documentation)

Alert call-outs