|

   Veteran Tools Platform - Developer Documentation

Veterans Crisis Line modal

The VCL modal itself lives in content/includes/footer.html, but the trigger lives in the header. Requires Javascript to trigger.

PropRequired?TypeDefaultDescription
<div id="modal-crisisline" class="va-overlay va-modal va-modal-large" role="alertdialog">
    <div class="va-crisis-panel va-modal-inner">

        <h3>Get help from Veterans Crisis Line</h3>

        <button class="va-modal-close va-overlay-close" type="button" onClick="showModal(this);">
      <i class="fa fa-close va-overlay-close"></i>
      <span class="usa-sr-only va-overlay-close">Close this modal</span>
    </button>

        <div class="va-overlay-body va-crisis-panel-body">
            <ul>
                <li><a href="tel:18002738255">Call <strong>1-800-273-8255 (Press 1)</strong></a></li>
                <li><a href="sms:838255">Text to <b>838255</b></a></li>
                <li><a href="https://www.veteranscrisisline.net/ChatTermsOfService.aspx?account=Veterans%20Chat">Chat <b>confidentially now</b></a></li>
            </ul>

            <p>If you are in crisis or having thoughts of suicide, visit <a href="https://www.veteranscrisisline.net/">VeteransCrisisLine.net</a> for more resources.</p>
        </div>
    </div>
</div>
 
<div id="modal-crisisline" class="va-overlay va-modal va-modal-large" role="alertdialog">
  <div class="va-crisis-panel va-modal-inner">

    <h3>Get help from Veterans Crisis Line</h3>

    <button class="va-modal-close va-overlay-close" type="button" onClick="showModal(this);">
      <i class="fa fa-close va-overlay-close"></i>
      <span class="usa-sr-only va-overlay-close">Close this modal</span>
    </button>

    <div class="va-overlay-body va-crisis-panel-body">
      <ul>
        <li><a href="tel:18002738255">Call <strong>1-800-273-8255 (Press 1)</strong></a></li>
        <li><a href="sms:838255">Text to <b>838255</b></a></li>
        <li><a href="https://www.veteranscrisisline.net/ChatTermsOfService.aspx?account=Veterans%20Chat">Chat <b>confidentially now</b></a></li>
      </ul>

      <p>If you are in crisis or having thoughts of suicide,
visit <a href="https://www.veteranscrisisline.net/">VeteransCrisisLine.net</a> for more resources.</p>
    </div>
  </div>
</div>
 
package:
  name: department-of-veteran-affairs/jean-pants
  version: 0.1.0
assetPath: /design-system/
isProduction: true