@vcl/vcl/panel/demo/example-dialog.html

The whole VCL in one package

<dialog class="panel panel-dialog" role="dialog">
  <div class="panel-header no-bg row justify-between center">
    <h3 class="panel-title">Modal Title</h3>
    <button type="button" class="button transparent">
      <div class="icogram"><div class="icon fas fa-times" aria-hidden="true" aria-label="Close" role="img"></div></div>
    </button>
  </div>
  <div class="panel-body">
    <div class="panel-content">
      Panel contents.
    </div>
  </div>
  <div class="panel-footer no-bg row justify-content-end">
    <div class="loose-button-group">
      <button type="button" class="button transparent outline">
        <div class="icogram">
          <span class="text">Cancel</span>
        </div>
      </button>
      <button type="button" class="button emphasized">
        <div class="icogram">
          <span class="text">Save Changes</span>
        </div>
      </button>
    </div>
  </div>
</dialog>

<dialog class="panel panel-dialog danger" role="dialog">
  <div class="panel-body">
    <div class="panel-content">
      <div class="icogram">
        <div class="icon far fa-question-circle scale300p" aria-hidden="true" aria-label="account" role="img"></div>
        <div class="text">Do you really want to delete XY?</div>
      </div>
    </div>
  </div>
  <div class="panel-footer no-bg row justify-content-end">
    <div class="loose-button-group">
      <button type="button" class="button transparent outline">
        <div class="icogram">
          <span class="text">Cancel</span>
        </div>
      </button>
      <button type="button" class="button danger">
        <div class="icogram">
          <span class="text">Delete</span>
        </div>
      </button>
    </div>
  </div>
</dialog>

<dialog class="panel panel-dialog" role="dialog">
  <div class="panel-header row justify-between center">
    <h3 class="panel-title">Step-up Authentication Required</h3>
    <button type="button" class="button transparent">
      <div class="icogram"><div class="icon fas fa-times" aria-hidden="true" aria-label="Close" role="img"></div></div>
    </button>
  </div>
  <div class="panel-body">
    <form class="form panel-content">
      <div class="form-control-group">
        <label class="form-control-label" for="vInputEx1">
          PIN Number
        </label>
        <div class="input-field">
          <input class="input" type="text" autocomplete="off">
        </div>
      </div>
    </form>
  </div>
  <div class="panel-footer row justify-content-end">
    <div></div>
    <div class="loose-button-group">
      <button type="button" class="button transparent outline">
        <div class="icogram">
          <span class="text">Cancel</span>
        </div>
      </button>
      <button type="button" class="button emphasized">
        <div class="icogram">
          <span class="text">Authenticate</span>
        </div>
      </button>
    </div>
  </div>
</dialog>