Modals are used to show interactive dialogs and notifications to your website users.
The default modal can be used by giving the class names modal-default, modal-list or modal-list-scroll to the div tag as per the requirement, you can refer the code snippet and copy the HTML code.
<div class="modal-default">
<h4 class="heading4">
Modal Header
</h4>
<p class="modal-body">
Body text of Modal
</p>
<div class="modal-actions">
<a href="">ACTION 1</a>
<a href="">ACTION 2</a>
</div>
</div>
<div class="modal-list">
<h4 class="heading4">
Modal Header
</h4>
<div class="modal-items-fixed">
<div class="modal-item">
<i class="fas fa-user-circle"></i>
<span>Item 1</span>
</div>
<div class="modal-item">
<i class="fas fa-user-circle"></i>
<span>Item 2</span>
</div>
<div class="modal-item">
<i class="fas fa-user-circle"></i>
<span>Item 3</span>
</div>
</div>
<div class="modal-actions">
<a href="">ACTION 1</a>
<a href="">ACTION 2</a>
</div>
</div>
<div class="modal-list-scroll">
<h4 class="heading4">
Modal Header
</h4>
<div class="modal-items-scrollable">
<span class="modal-item">
<input type="radio">
<label>Item 1</label>
</span>
<span class="modal-item">
<input type="radio">
<span>Item 2</span>
</span>
<span class="modal-item">
<input type="radio">
<span>Item 3</span>
</span>
<span class="modal-item">
<input type="radio">
<span>Item 4</span>
</span>
<span class="modal-item">
<input type="radio">
<span>Item 5</span>
</span>
<span class="modal-item">
<input type="radio">
<span>Item 6</span>
</span>
</div>
<div class="modal-actions">
<a href="">ACTION 1</a>
<a href="">ACTION 2</a>
</div>
</div>