Modal
Modal can be used for creating dialog boxes, to communicate with user.
Modal Component
Modal Head
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="modal">
<div class="modal-head">Modal Head</div>
<p class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<div class="modal-foot">
<button class="btn btn-primary-outline">Close</button>
<button class="btn btn-primary-solid">Save Changes</button>
</div>
</div>
Modal Demo
Modal Head
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<button
id="modal-demo-btn"
class="btn btn-primary-solid btn-squared"
>
Modal Demo
</button>
<div id="modal-container" class="d-none modal-container">
<div class="mx-auto modal">
<div class="modal-head">Modal Head</div>
<p class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="modal-foot">
<button
id="modal-close-btn"
class="btn btn-primary-outline"
>
Close
</button>
<button class="btn btn-primary-solid">Save Changes</button>
</div>
</div>
</div>