Modal
A Modal is an overlay on the primary window or another dialog window. Content behind the modal dialog remains inert and users cannot interact with it.
Example
Sign up
Name
Password
<div
class="modal-wrapper">
<div class="modal">
<div class="modal-head">
<p class="modal-head-text">Sign up</p>
<button class="icon-wrapper">
<i class="fa-solid fa-xmark close-btn"></i>
</button>
</div>
<div class="modal-body">
<p class="modal-text">Name</p>
<input class="outlined-input" type="text" />
<p class="modal-text">Email</p>
<input class="outlined-input" type="text" />
<p class="modal-text">Password</p>
<input class="outlined-input" type="password" />
</div>
<div class="modal-foot">
<button class="secondary-btn">Cancel</button>
<button class="primary-btn">Submit</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-head">
<p class="modal-head-text">Sign up</p>
<button class="icon-wrapper">
<i class="fa-solid fa-xmark close-btn"></i>
</button>
</div>
<div class="modal-body">
<p class="modal-text">Name</p>
<input class="outlined-input" type="text" />
<p class="modal-text">Email</p>
<input class="outlined-input" type="text" />
<p class="modal-text">Password</p>
<input class="outlined-input" type="password" />
</div>
<div class="modal-foot">
<button class="secondary-btn">Cancel</button>
<button class="primary-btn">Submit</button>
</div>
</div>
</div>