{% extends "layouts/base.html" %}

{% block title %} Alerts {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
  <div class="yoo-uikits-heading">
    <h2 class="yoo-uikits-title">Alerts</h2>
  </div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Basic alerts</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#basic-alerts"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="basic-alerts">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Basic alerts</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a primary alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a secondary alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a success alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a danger alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a warning alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a info alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a light alert—check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a dark alert—check it out!
<span class="nt">&lt;/div&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="alert alert-primary" role="alert">
              This is a primary alert—check it out!
            </div>
            <div class="alert alert-secondary" role="alert">
              This is a secondary alert—check it out!
            </div>
            <div class="alert alert-success" role="alert">
              This is a success alert—check it out!
            </div>
            <div class="alert alert-danger" role="alert">
              This is a danger alert—check it out!
            </div>
            <div class="alert alert-warning" role="alert">
              This is a warning alert—check it out!
            </div>
            <div class="alert alert-info" role="alert">
              This is a info alert—check it out!
            </div>
            <div class="alert alert-dark" role="alert">
              This is a dark alert—check it out!
            </div>
            <div class="yoo-height-b5 yoo-height-lg-b5"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Link Color</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#link-color"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="link-color">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Link Color</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a primary alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a secondary alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a success alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a danger alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a warning alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a info alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a light alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a dark alert with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>an example link<span class="nt">&lt;/a&gt;</span>. Give it a click if you like.
<span class="nt">&lt;/div&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="alert alert-primary" role="alert">
              This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-secondary" role="alert">
              This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-success" role="alert">
              This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-danger" role="alert">
              This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-warning" role="alert">
              This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-info" role="alert">
              This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="alert alert-dark" role="alert">
              This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            <div class="yoo-height-b5 yoo-height-lg-b5"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Additional content</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#additional-content"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="additional-content">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Additional content</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-heading"</span><span class="nt">&gt;</span>Well done!<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;p&gt;</span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;hr&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="alert alert-success" role="alert">
              <h4 class="alert-heading">Well done!</h4>
              <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
              <hr>
              <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
            </div>
            <div class="yoo-height-b5 yoo-height-lg-b5"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      

    </div><!-- .col -->
  </div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}