mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
77 lines
3.8 KiB
HTML
77 lines
3.8 KiB
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 class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Minor alerts</h2>
|
|
{% include "ui/alert.html" show-close minor=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
|
{% include "ui/alert.html" show-close minor=true type="success" description="This is a custom alert box with a description." %}
|
|
{% include "ui/alert.html" show-close minor=true type="warning" description="This is a custom alert box with a description." %}
|
|
{% include "ui/alert.html" show-close minor=true type="info" description="This is a custom alert box with a description." %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|