Opportunity Standard

<!--{ @data-js           This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<!--{ @role              Alert roles may either be "region," "status," or "alert" require different roles }-->
<!--{ @aria-describedby  Alert roles of "region" require an @aria-labeledby or description label targeting the alert body }-->
<article aria-describedby="aria-db-alert-9f70281f6e5d5" class="c-alert " data-js="alert-info" role="region">
  <div class="c-alert__graphic">
    <svg aria-hidden="true" class="icon-ui">
      <use href="#lucide-info"></use>
    </svg>
  </div>
  <!--{ @aria-live  Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
  <div class="c-alert__body" id="aria-db-alert-9f70281f6e5d5">
    <!--{ @data-js-alert  This selector is recommended for JavaScript enhanced alerts but not necessary }-->
    <p data-js-alert='text'>An informational standard alert message or callout.</p>
  </div>
</article>

<!--{ @data-js           This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<!--{ @role              Alert roles may either be "region," "status," or "alert" require different roles }-->
<!--{ @aria-describedby  Alert roles of "region" require an @aria-labeledby or description label targeting the alert body }-->
<article aria-describedby="aria-db-alert-82e103f4ad317" class="c-alert c-alert-status-primary" data-js="alert-primary" role="region">
  <div class="c-alert__graphic">
    <svg aria-hidden="true" class="icon-ui">
      <use href="#lucide-info"></use>
    </svg>
  </div>
  <!--{ @aria-live  Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
  <div class="c-alert__body" id="aria-db-alert-82e103f4ad317">
    <!--{ @data-js-alert  This selector is recommended for JavaScript enhanced alerts but not necessary }-->
    <p data-js-alert='text'>An informational message or callout.</p>
  </div>
</article>

<!--{ @data-js           This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<!--{ @role              Alert roles may either be "region," "status," or "alert" require different roles }-->
<!--{ @aria-describedby  Alert roles of "region" require an @aria-labeledby or description label targeting the alert body }-->
<article class="c-alert c-alert-status-secondary" data-js="alert-secondary" role="status">
  <div class="c-alert__graphic">
    <svg aria-hidden="true" class="icon-ui">
      <use href="#lucide-check-circle"></use>
    </svg>
  </div>
  <!--{ @aria-live  Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
  <div class="c-alert__body" id="aria-db-alert-9a06d33898381">
    <!--{ @data-js-alert  This selector is recommended for JavaScript enhanced alerts but not necessary }-->
    <p data-js-alert='text'>A successful message or callout.</p>
  </div>
</article>

<!--{ @data-js           This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<!--{ @role              Alert roles may either be "region," "status," or "alert" require different roles }-->
<!--{ @aria-describedby  Alert roles of "region" require an @aria-labeledby or description label targeting the alert body }-->
<article class="c-alert c-alert-status-tertiary" data-js="alert-tertiary" role="error">
  <div class="c-alert__graphic">
    <svg aria-hidden="true" class="icon-ui">
      <use href="#lucide-alert-triangle"></use>
    </svg>
  </div>
  <!--{ @aria-live  Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
  <div class="c-alert__body" id="aria-db-alert-eaa0a62b64f3d">
    <!--{ @data-js-alert  This selector is recommended for JavaScript enhanced alerts but not necessary }-->
    <p data-js-alert='text'>A warning message or callout.</p>
  </div>
</article>