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.
...
Available for any length of content, along with a designated icon depends on which class you have used.
Success
...
| Code Block |
|---|
<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
...
| Code Block |
|---|
<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
...
| Code Block |
|---|
<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> |
...
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
...