{{#> base }}
    {{> AppSidebar/sidebar elements-list-group=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group</h5>
                                    <ul class="list-group">
                                        <li class="list-group-item">Cras justo odio</li>
                                        <li class="list-group-item">Dapibus ac facilisis in</li>
                                        <li class="list-group-item">Morbi leo risus</li>
                                        <li class="list-group-item">Porta ac consectetur ac</li>
                                        <li class="list-group-item">Vestibulum at eros</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group buttons</h5>
                                    <div>
                                        <ul class="list-group">
                                            <button class="active list-group-item-action list-group-item">Cras justo odio</button>
                                            <button class="list-group-item-action list-group-item">Dapibus ac facilisis in</button>
                                            <button class="list-group-item-action list-group-item">Morbi leo risus</button>
                                            <button class="list-group-item-action list-group-item">Porta ac consectetur ac</button>
                                            <button class="disabled list-group-item-action list-group-item">Vestibulum at eros</button>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group badges</h5>
                                    <ul class="list-group">
                                        <li class="justify-content-between list-group-item">Cras justo odio <span class="badge bg-secondary rounded-pill">14</span></li>
                                        <li class="justify-content-between list-group-item">Dapibus ac facilisis in <span class="badge bg-secondary rounded-pill">2</span></li>
                                        <li class="justify-content-between list-group-item">Morbi leo risus <span class="badge bg-secondary rounded-pill">1</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group contextual classes</h5>
                                    <ul class="list-group">
                                        <li class="list-group-item-success list-group-item">Cras justo odio</li>
                                        <li class="list-group-item-info list-group-item">Dapibus ac facilisis in</li>
                                        <li class="list-group-item-warning list-group-item">Morbi leo risus</li>
                                        <li class="list-group-item-danger list-group-item">Porta ac consectetur ac</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group custom content</h5>
                                    <ul class="list-group">
                                        <li class="active list-group-item"><h5 class="list-group-item-heading">List group item heading</h5>
                                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p></li>
                                        <li class="list-group-item"><h5 class="list-group-item-heading">List group item heading</h5>
                                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p></li>
                                        <li class="list-group-item"><h5 class="list-group-item-heading">List group item heading</h5>
                                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group disabled items</h5>
                                    <ul class="list-group"><a href="javascript:void(0);" class="disabled list-group-item">Cras justo odio</a><a href="javascript:void(0);" class="list-group-item">Dapibus ac facilisis in</a><a
                                            href="javascript:void(0);" class="list-group-item">Morbi leo risus</a><a href="javascript:void(0);" class="list-group-item">Porta ac consectetur ac</a><a href="javascript:void(0);" class="list-group-item">Vestibulum
                                        at eros</a></ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">List group without border</h5>
                                    <ul class="list-group list-group-flush"><a href="javascript:void(0);" class="disabled list-group-item">Cras justo odio</a><a href="javascript:void(0);" class="list-group-item">Dapibus ac facilisis in</a><a
                                            href="javascript:void(0);" class="list-group-item">Morbi leo risus</a><a href="javascript:void(0);" class="list-group-item">Porta ac consectetur ac</a><a href="javascript:void(0);" class="list-group-item">Vestibulum
                                        at eros</a></ul>
                                </div>
                            </div>
                        </div>
                    </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}