<div class="notifications" data-v-notifications>

	<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error >

		<div class="align-middle me-2">
			<i class="align-middle ti-announcement"></i>
		</div>

		<div class="flex-grow-1 align-self-center text-small" >
			<div>
				<div data-v-notification-text>
					This is a placeholder for a notification message.
				</div>
			</div>
		</div>


		<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">
				<!-- <i class="la ti-times"></i> -->
			</span>
		</button>
	</div>

	<div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success >

		<div class="align-middle me-2">
			<i class="align-middle ti-check"></i>
		</div>

		<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
			This is a placeholder for a success message.
		</div>

		<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">
				<!-- <i class="la ti-times"></i> -->
			</span>
		</button>
	</div>
	
	<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info >

		<div class="align-middle me-2">
			<i class="align-middle ti-light-bulb"></i>
		</div>

		<div class="flex-grow-1 align-self-center" data-v-notification-text>
			This is a placeholder for a info message.
		</div>

		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">
				<!-- <i class="la ti-times"></i> -->
			</span>
		</button>
	</div>

</div>
