NJ Web Design System (v2.1.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.

{% set close_icon %}
  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
    <use xlink:href="{{ uswds.path }}/img/sprite.svg#{{ close_button.icon_type | default("close") }}"></use>
  </svg>
{% endset %}

<div class="margin-y-3">
  <a href="#{{ id }}" class="usa-button" aria-controls="{{ id }}" data-open-modal>{{ trigger.text }}</a>
  <div class="usa-modal {{ modifier }}" id="{{ id }}" aria-labelledby="{{ header.id }}" aria-describedby="{{ describedby }}"{% if forced %} data-force-action{% endif -%}>
    <div class="usa-modal__content">
      <div class="usa-modal__main">
        {% if header.text -%}
        <h2 class="usa-modal__heading" id="{{ header.id }}">
          {{ header.text }}
        </h2>
        {% endif -%}
        {% if description.text -%}
        <div class="usa-prose">
          <p id="{{ description.id }}">{{ description.text }}</p>
        </div>
        {% endif -%}
        {% if footer -%}
        <div class="usa-modal__footer">
          <ul class="usa-button-group">
            {% for action in footer -%}
              <li class="usa-button-group__item">
                <button type="button" class="{{ action.class | default("usa-button") }}" data-close-modal>{{ action.text }}</button>
              </li>
            {% endfor -%}
          </ul>
        </div>
        {%- endif %}
      </div>
      {% if not forced -%}
      <button class="usa-button usa-modal__close" aria-label="{{ close_button.aria_label }}" data-close-modal>
        {% if close_button.text -%}
          {{ close_button.text }}
        {% else -%}
          {{ close_icon | safe }}
        {% endif -%}
      </button>
      {% endif -%}
    </div>
  </div>
</div>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
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