Metro Component Library Demo 2.0

Modal: Large Modal 

<div class="margin-y-3">
    <a href="#example-modal-2" class="usa-button" aria-controls="example-modal-2" data-open-modal>Open large modal</a>
    <div class="usa-modal usa-modal--lg" id="example-modal-2" aria-labelledby="modal-2-heading" aria-describedby="modal-2-description">
        <div class="usa-modal__content">
            <div class="usa-modal__main">
                <h2 class="usa-modal__heading" id="modal-2-heading">
                    Are you sure you want to continue?
                </h2>
                <div class="usa-prose">
                    <p id="modal-2-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-2
modifier: usa-modal--lg
describedby: modal-2-description
trigger:
  text: Open large modal
header:
  text: Are you sure you want to continue?
  id: modal-2-heading
description:
  id: modal-2-description
  text: You have unsaved changes that will be lost.
footer:
  - action: null
    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