Before using one of these components to indicate an error, please refer to documentation on error handling:
| Prop | Required? | Type | Default | Description |
|---|
<div class="usa-alert usa-alert-success">
<div class="usa-alert-body va-alert-body">
<h3 class="va-alert-title">Success status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Warning status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Error status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status - Paragraph Width</h3>
<p>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-success">
<div class="usa-alert-body va-alert-body">
<h3 class="va-alert-title">Success status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Warning status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Error status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status</h3>
<p>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 va-alert-body">
<h3 class="va-alert-title">Information status - Paragraph Width</h3>
<p>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: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true