Web Component Before/After Example

Web Component Before After Example.html

<!-- Before -->
<div class="usa-site-alert usa-site-alert--emergency">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h4 class="usa-alert__heading">Emergency Status</h4>
      <p class="usa-alert__text"> Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod. </p>
    </div>
  </div>
</div>

<!-- After -->
<maryland-site-alert type="emergency">
  <div slot="heading">Emergency Status</div>
  <div slot="content"> Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod. </div>
</maryland-site-alert>