{{#extend "layout" title="Light Blue HTML5 Dashboard - UI Badge"}}
{{#content "sidebar"}}
{{> sidebar active="ui_badge"}}
{{/content}}
{{#content "content" mode="replace"}}
<ol class="breadcrumb">
    <li class="breadcrumb-item">YOU ARE HERE</li>
    <li class="breadcrumb-item active">UI Badge</li>
</ol>
<h1 class="page-title">Badge</h1>
<div class="row">
    <div class="col-12">
        <section class="widget">
            <header>
                <h5>
                    Badge <span class="fw-semi-bold">Example</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="la la-angle-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i class="la la-angle-down"></i></a>
                    <a href="#" data-widgster="close"><i class="la la-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <p>Badges scale to match the size of the immediate parent element by using relative font sizing and em
                    units.</p>
                <h1>Example heading <span class="badge badge-primary ml-1">Primary</span></h1>
                <h2>Example heading <span class="badge badge-info ml-1">Info</span></h2>
                <h3>Example heading <span class="badge badge-warning ml-1">Warning</span></h3>
                <h4>Example heading <span class="badge badge-success ml-1">Success</span></h4>
                <h5>Example heading <span class="badge badge-danger ml-1">Danger</span></h5>
                <h6>Example heading <span class="badge badge-light ml-1">Light</span></h6>
                <p class="mt-lg">Badges can be used as part of links or buttons to provide a counter.</p>
                <button type="button" class="btn btn-primary">
                    Notifications <span class="badge badge-danger">4</span>
                </button>
            </div>
        </section>
    </div>
    <div class="col-12">
        <section class="widget">
            <header>
                <h5>
                    Pill <span class="fw-semi-bold">Badges</span>
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="la la-angle-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i class="la la-angle-down"></i></a>
                    <a href="#" data-widgster="close"><i class="la la-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <p>Use the <code>.badge-pill</code> modifier class to make badges more rounded (with a larger
                    border-radius and additional horizontal padding).</p>
                <span class="badge badge-pill badge-primary mr-3 mb-3">Primary</span>
                <span class="badge badge-pill badge-success mr-3 mb-3">Success</span>
                <span class="badge badge-pill badge-danger mr-3 mb-3">Danger</span>
                <span class="badge badge-pill badge-warning mr-3 mb-3">Warning</span>
                <span class="badge badge-pill badge-info mr-3 mb-3">Info</span>
                <span class="badge badge-pill badge-light mr-3 mb-3">Light</span>
                <span class="badge badge-pill badge-dark mr-3 mb-3">Dark</span>
            </div>
        </section>
    </div>
    <div class="col-12">
        <section class="widget">
            <header>
                <h5>
                    Links
                </h5>
                <div class="widget-controls">
                    <a data-widgster="expand" title="Expand" href="#"><i class="la la-angle-up"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i class="la la-angle-down"></i></a>
                    <a href="#" data-widgster="close"><i class="la la-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <p>Using the contextual <code>.badge-*</code> classes on an <code>&lt;a&gt;</code> element quickly
                    provide actionable badges with hover and focus states.</p>
                <a href="#" class="badge badge-primary mr-3 mb-3">Primary</a>
                <a href="#" class="badge badge-success mr-3 mb-3">Success</a>
                <a href="#" class="badge badge-danger mr-3 mb-3">Danger</a>
                <a href="#" class="badge badge-warning mr-3 mb-3">Warning</a>
                <a href="#" class="badge badge-info mr-3 mb-3">Info</a>
                <a href="#" class="badge badge-light mr-3 mb-3">Light</a>
                <a href="#" class="badge badge-dark mr-3 mb-3">Dark</a>
            </div>
        </section>
    </div>
</div>
{{/content}}
{{#content "scripts"}}
<script src="../js/components/ui-badge.js"></script>
{{/content}}
{{/extend}}