{{#> base }}
    {{> AppSidebar/sidebar elements-badges-labels=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <div class="row">
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">Buttons Badges</h5>
                            <button class="mb-2 me-2 btn btn-primary">Primary<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-secondary">Secondary<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-success">Success<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-info">Info<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-warning">Warning<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-danger">Danger<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-focus">Focus<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-alternate">Alt<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-light">Light<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-dark">Dark<span class="badge rounded-pill bg-light">6</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 1<span class="badge rounded-pill bg-primary">6</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 2<span class="badge rounded-pill bg-success">6</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 3<span class="badge rounded-pill bg-danger">6</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 4<span class="badge rounded-pill bg-warning">6</span></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">With Buttons</h5>
                            <button class="mb-2 me-2 btn btn-primary">Primary<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-secondary">Secondary<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-success">Success<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-info">Info<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-warning">Warning<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-danger">Danger<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-focus">Focus<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-alternate">Alt<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-light">Light<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-dark">Dark<span class="badge bg-light">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 1<span class="badge bg-primary">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 2<span class="badge bg-success">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 3<span class="badge bg-danger">NEW</span></button>
                            <button class="mb-2 me-2 btn btn-link">Link 4<span class="badge bg-warning">NEW</span></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-card mb-3 card">
                <div class="card-body"><h5 class="card-title">Colors</h5>
                    <div class="mb-2 me-2 badge bg-primary">Primary</div>
                    <div class="mb-2 me-2 badge bg-secondary">Secondary</div>
                    <div class="mb-2 me-2 badge bg-success">Success</div>
                    <div class="mb-2 me-2 badge bg-info">Info</div>
                    <div class="mb-2 me-2 badge bg-warning">Warning</div>
                    <div class="mb-2 me-2 badge bg-danger">Danger</div>
                    <div class="mb-2 me-2 badge bg-focus">Focus</div>
                    <div class="mb-2 me-2 badge bg-alternate">Alt</div>
                    <div class="mb-2 me-2 badge bg-light">Light</div>
                    <div class="mb-2 me-2 badge bg-dark">Dark</div>
                    <div class="divider"></div>
                    <h5 class="card-title">Pills</h5>
                    <div class="mb-2 me-2 badge rounded-pill bg-primary">Primary</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-secondary">Secondary</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-success">Success</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-info">Info</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-warning">Warning</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-danger">Danger</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-focus">Focus</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-alternate">Alt</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-light">Light</div>
                    <div class="mb-2 me-2 badge rounded-pill bg-dark">Dark</div>
                    <div class="divider"></div>
                    <h5 class="card-title">Links</h5><a href="javascript:void(0);" class="mb-2 me-2 badge bg-primary">Primary</a><a href="javascript:void(0);" class="mb-2 me-2 badge bg-secondary">Secondary</a><a
                            href="javascript:void(0);" class="mb-2 me-2 badge bg-success">Success</a><a href="javascript:void(0);" class="mb-2 me-2 badge bg-info">Info</a><a href="javascript:void(0);"
                                                                                                                                                                                    class="mb-2 me-2 badge bg-warning">Warning</a><a
                            href="javascript:void(0);" class="mb-2 me-2 badge bg-danger">Danger</a><a href="javascript:void(0);" class="mb-2 me-2 badge bg-focus">Focus</a><a href="javascript:void(0);"
                                                                                                                                                                                    class="mb-2 me-2 badge bg-alternate">Alt</a><a
                            href="javascript:void(0);" class="mb-2 me-2 badge bg-light">Light</a><a href="javascript:void(0);" class="mb-2 me-2 badge bg-dark">Dark</a></div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}