tabler/preview/pages/alerts.html

---
title: Alerts
page-menu: base.alerts
page-header: Alerts
layout: default
permalink: alerts.html
---

<div class="row row-cards">
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Basic alerts</h2>
				{% include "ui/alert.html" type="danger" title="An error occurred!" %}
				{% include "ui/alert.html" type="warning" title="Some information is missing!" %}
				{% include "ui/alert.html" type="success" title="Completed successfully!" %}
				{% include "ui/alert.html" type="info" title="Just a quick note!" %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Alerts with action</h2>
				{% include "ui/alert.html" show-close action="Link" type="danger" title="An error occurred!" %}
				{% include "ui/alert.html" show-close action="Link" type="warning" title="Some information is missing!" %}
				{% include "ui/alert.html" show-close action="Link" type="success" title="Completed successfully!" %}
				{% include "ui/alert.html" show-close action="Link" type="info" title="Just a quick note!" %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Dismissible alerts</h2>
				{% include "ui/alert.html" show-close type="danger" title="An error occurred!" %}
				{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" %}
				{% include "ui/alert.html" show-close type="success" title="Completed successfully!" %}
				{% include "ui/alert.html" show-close type="info" title="Just a quick note!" %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Alert with a description</h2>
				{% include "ui/alert.html" show-close type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
				{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" description="This is a custom alert box with a description." %}
				{% include "ui/alert.html" show-close type="success" title="Completed successfully!" description="This is a custom alert box with a description." %}
				{% include "ui/alert.html" show-close type="info" title="Just a quick note!" description="This is a custom alert box with a description." %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Important alerts</h2>
				{% include "ui/alert.html" show-close important=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
				{% include "ui/alert.html" show-close important=true type="success" description="This is a custom alert box with a description." %}
				{% include "ui/alert.html" show-close important=true type="warning" description="This is a custom alert box with a description." %}
				{% include "ui/alert.html" show-close important=true type="info" description="This is a custom alert box with a description." %}
			</div>
		</div>
	</div>
</div>