<div class="margin-y-3">
<a href="#example-modal-1" class="usa-button" aria-controls="example-modal-1" data-open-modal>Open default modal</a>
<div class="usa-modal " id="example-modal-1" aria-labelledby="modal-1-heading" aria-describedby="modal-1-description">
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading">
Are you sure you want to continue?
</h2>
<div class="usa-prose">
<p id="modal-1-description">You have unsaved changes that will be lost.</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button type="button" class="usa-button" data-close-modal>Continue without saving</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal>Go back</button>
</li>
</ul>
</div>
</div>
<button class="usa-button usa-modal__close" aria-label="Close this window" data-close-modal>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../../dist/img/sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
id: example-modal-1
modifier: ''
describedby: modal-1-description
trigger:
text: Open default modal
header:
text: Are you sure you want to continue?
id: modal-1-heading
description:
id: modal-1-description
text: You have unsaved changes that will be lost.
footer:
- action: null
class: usa-button
text: Continue without saving
- action: null
class: usa-button usa-button--unstyled padding-105 text-center
text: Go back
close_button:
aria_label: Close this window
text: null
icon_type: close