<!-- Button type: solid  -->
<button data-toggle="modal" data-target="#side-panel-modal" type="button" class="vi-btn-solid vi-btn">Show side panel</button>
<!-- Side panel modal -->
<div class="modal vi-modal vi-side-panel" id="side-panel-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h4>Brian Jacobus Haleandsomething</h4>
              </div>
              <div class="vi-modal-layout__close">
                <button aria-label="Message dialog - click to close or navigate to the message content" class="vi-btn-close vi-btn-close--accent-1 vi-btn" data-dismiss="modal" type="button">
                  <span class="vi-btn-close__label vi-btn__label">Close</span>
                </button>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <div class="vi-icon-list__item text-dominant">
                <div class="vi-icon-list__icon">
                  <svg aria-label="arrow-right" class="vi-icon" height="24" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.5 10.5l-4-4h-1.4l3.5 3.5H3.5v1h16.1l-3.5 3.5h1.4z"></path>
                  </svg>
                </div>
                <div class="vi-icon-list__content">
                  <a class="vi-icon-list__link" href="#">Link to a page on this website</a>
                </div>
              </div>
              <div class="vi-icon-list__item text-dominant">
                <div class="vi-icon-list__icon">
                  <svg aria-label="arrow-right" class="vi-icon" height="24" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.5 10.5l-4-4h-1.4l3.5 3.5H3.5v1h16.1l-3.5 3.5h1.4z"></path>
                  </svg>
                </div>
                <div class="vi-icon-list__content">
                  <a class="vi-icon-list__link" href="#">Different link to a page on this website</a>
                </div>
              </div>
            </div>
            <button class="vi-btn-outline vi-btn-outline--accent-1 vi-btn mt-20" type="button">
              Log out
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>