Alerts

<div class="usa-alert usa-alert-success">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Success Status</h3>
        <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
</div>

<div class="usa-alert usa-alert-warning">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Warning Status</h3>
        <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
</div>

<div class="usa-alert usa-alert-error" role="alert">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Error Status</h3>
        <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
</div>

<div class="usa-alert usa-alert-info">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Information Status</h3>
        <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
</div>

<div class="usa-alert usa-alert-info">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Information Status</h3>
        <p class="usa-alert-text">Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione
            voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
</div>

<div class="usa-alert usa-alert-info usa-alert-paragraph">
    <div class="usa-alert-body">
        <h3 class="usa-alert-heading">Information Status - Paragraph Width</h3>
        <p class="usa-alert-text">Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione
            voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
</div>

There are no notes for this item.

<div class="usa-alert usa-alert-success">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Success Status</h3>
      <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>

  <div class="usa-alert usa-alert-warning">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Warning Status</h3>
      <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>

  <div class="usa-alert usa-alert-error" role="alert">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Error Status</h3>
      <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>

  <div class="usa-alert usa-alert-info">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Information Status</h3>
      <p class="usa-alert-text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
    </div>
  </div>

  <div class="usa-alert usa-alert-info">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Information Status</h3>
      <p class="usa-alert-text">Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>

  <div class="usa-alert usa-alert-info usa-alert-paragraph">
    <div class="usa-alert-body">
      <h3 class="usa-alert-heading">Information Status - Paragraph Width</h3>
      <p class="usa-alert-text">Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
package:
  name: uswds
  version: 1.3.0
uswds:
  path: ../../dist