---
title: Modals
page-header: Modals
page-menu: base.modals
layout: default
permalink: modals.html
---

<div class="card">
	<div class="card-body">
		<div class="row g-5">
	<div class="col-3">
		<div class="list-group">
			<a href="#modal-simple" class="list-group-item">Simple modal</a>
			<a href="#modal-large" class="list-group-item">Large modal</a>
			<a href="#modal-small" class="list-group-item">Small modal</a>
			<a href="#modal-full-width" class="list-group-item">Full width modal</a>
			<a href="#modal-scrollable" class="list-group-item">Scrollable modal</a>
			<a href="#modal-report" class="list-group-item">Modal with form</a>
			<a href="#modal-success" class="list-group-item">Success modal</a>
			<a href="#modal-danger" class="list-group-item">Danger modal</a>
			<a href="#modal-team" class="list-group-item">Modal with simple form</a>
		</div>
	</div>
	<div class="col">
		<div class="space-y-6">
			<div>
				<h3>Simple modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="simple" %}
			</div>
			<div>
				<h3>Large modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="large" size="lg" %}
			</div>
			<div>
				<h3>Small modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="small" size="sm" %}
			</div>
			<div>
				<h3>Full width modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="full-width" size="full-width" %}
			</div>
			<div>
				<h3>Scrollable modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" %}
			</div>
			<div>
				<h3>Modal with form</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="report" size="lg" %}
			</div>
			<div>
				<h3>Success modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="success" size="sm" %}
			</div>
			<div>
				<h3>Danger modal</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="danger" size="sm" %}
			</div>
			<div>
				<h3>Modal with simple form</h3>
				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="team" %}
			</div>
		</div>
	</div>
</div>
	</div>
</div>