<?php include 'header.php'; ?>

<style>
    .web-app-top-bar {
        display: none !important
    }
</style>

<div class="page default-layout page-name">

    <div class="ds-section">

        <div class="ds-title">
            <h1 class="text-center">Badges</h1>
        </div>

        <div class="container">

            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges Normal </h3>

                <span class="badge badge-primary">Primary</span>
                <span class="badge badge-secondary">Secondary</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-danger">Danger</span>
                <span class="badge badge-warning">Warning</span>
                <span class="badge badge-info">Info</span>
                <span class="badge badge-light">Light</span>
                <span class="badge badge-dark">Dark</span>
            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges Faded </h3>

                <span class="badge badge-primary-faded">Primary</span>
                <span class="badge badge-secondary-faded">Secondary</span>
                <span class="badge badge-success-faded">Success</span>
                <span class="badge badge-danger-faded">Danger</span>
                <span class="badge badge-warning-faded">Warning</span>
                <span class="badge badge-info-faded">Info</span>
                <span class="badge badge-light-faded">Light</span>
                <span class="badge badge-dark-faded">Dark</span>

            </div> <!-- ds-sub-section -->




            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges Faded opacity </h3>

                <span class="badge badge-dark-faded-opacity">Dark</span>

            </div> <!-- ds-sub-section -->


            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges posts </h3>

                <span class="badge badge-post-pending">pending</span>
                <span class="badge badge-post-active">active</span>
                <span class="badge badge-post-not-active">not active</span>
                <span class="badge badge-post-not-completed">not completed</span>
                <span class="badge badge-post-rejected">rejected</span>
                <span class="badge badge-post-finished">finished</span>

            </div> <!-- ds-sub-section -->




            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges order </h3>

                <span class="badge badge-placed"> placed </span>

                <span class="badge badge-preparing"> preparing </span>

                <span class="badge badge-out-for-delivery"> out for delivery </span>

                <span class="badge badge-cancelled-by-store"> cancelled by store </span>


            </div> <!-- ds-sub-section -->





            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges Outline </h3>

                <span class="badge badge-outline-primary">Primary</span>
                <span class="badge badge-outline-secondary">Secondary</span>
                <span class="badge badge-outline-success">Success</span>
                <span class="badge badge-outline-danger">Danger</span>
                <span class="badge badge-outline-warning">Warning</span>
                <span class="badge badge-outline-info">Info</span>
                <span class="badge badge-outline-light">Light</span>
                <span class="badge badge-outline-dark">Dark</span>

            </div> <!-- ds-sub-section -->



            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Badges Outline </h3>

                <span class="badge badge-outline-primary-faded">Primary</span>
                <span class="badge badge-outline-secondary-faded">Secondary</span>
                <span class="badge badge-outline-success-faded">Success</span>
                <span class="badge badge-outline-danger-faded">Danger</span>
                <span class="badge badge-outline-warning-faded">Warning</span>
                <span class="badge badge-outline-info-faded">Info</span>
                <span class="badge badge-outline-light-faded">Light</span>
                <span class="badge badge-outline-dark-faded">Dark</span>

            </div> <!-- ds-sub-section -->









            <hr />

            <div class="ds-sub-section mb-5">
                <h3 class="text-left mb-4"> Badges sm </h3>
                <span class="badge badge-primary badge-sm">Primary</span>
            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">
                <h3 class="text-left mb-4"> Badges default </h3>
                <span class="badge badge-primary">Primary</span>
            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">
                <h3 class="text-left mb-4"> Badges lg </h3>
                <span class="badge badge-primary badge-lg">Primary</span>
            </div> <!-- ds-sub-section -->



        </div> <!-- container -->

    </div> <!-- ds-section -->

</div> <!-- page -->

<?php include 'footer.php'; ?>