mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 20:32:24 +04:00
Paweł Kuna
70 lines
2.8 KiB
HTML
70 lines
2.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>
|
|
<p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
|
{% include "ui/alert.html" type="success" %}
|
|
{% include "ui/alert.html" type="warning" %}
|
|
{% include "ui/alert.html" type="danger" %}
|
|
{% include "ui/alert.html" type="info" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Alerts with icon</h2>
|
|
<p class="text-secondary">Build on any alert by adding an optional icon.</p>
|
|
{% include "ui/alert.html" type="success" show-icon=true %}
|
|
{% include "ui/alert.html" type="warning" show-icon=true %}
|
|
{% include "ui/alert.html" type="danger" show-icon=true %}
|
|
{% include "ui/alert.html" type="info" show-icon=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Dismissible alerts</h2>
|
|
<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
|
|
{% include "ui/alert.html" type="success" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" type="warning" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" type="danger" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" type="info" show-icon=true show-close=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Alert with a description</h2>
|
|
<p class="text-secondary">Add a description to the alert to provide additional information.</p>
|
|
{% include "ui/alert.html" type="success" show-description=true show-icon=true %}
|
|
{% include "ui/alert.html" type="warning" show-description=true show-icon=true %}
|
|
{% include "ui/alert.html" type="danger" show-description=true show-icon=true %}
|
|
{% include "ui/alert.html" type="info" show-description=true show-icon=true %}
|
|
</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" important=true type="success" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" important=true type="warning" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" important=true type="danger" show-icon=true show-close=true %}
|
|
{% include "ui/alert.html" important=true type="info" show-icon=true show-close=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|