Badges.

A variety of badges.

<!-- Badges Section -->
        <section class="section">
            <h2>Badges</h2>

            <!-- Basic Badges -->
            <div class="badge-showcase">
                <h3>Basic Badges</h3>
                <div class="badge-group">
                    <span class="badge">Default</span>
                    <span class="badge badge-primary">Primary</span>
                    <span class="badge badge-success">Success</span>
                    <span class="badge badge-warning">Warning</span>
                    <span class="badge badge-danger">Danger</span>
                    <span class="badge badge-info">Info</span>
                </div>
            </div>

            <!-- Soft Badges -->
            <div class="badge-showcase">
                <h3>Soft Badges</h3>
                <div class="badge-group">
                    <span class="badge badge-soft">Default</span>
                    <span class="badge badge-soft-primary">Primary</span>
                    <span class="badge badge-soft-success">Success</span>
                    <span class="badge badge-soft-warning">Warning</span>
                    <span class="badge badge-soft-danger">Danger</span>
                    <span class="badge badge-soft-info">Info</span>
                </div>
            </div>

            <!-- Outline Badges -->
            <div class="badge-showcase">
                <h3>Outline Badges</h3>
                <div class="badge-group">
                    <span class="badge badge-outline">Default</span>
                    <span class="badge badge-outline-primary">Primary</span>
                    <span class="badge badge-outline-success">Success</span>
                    <span class="badge badge-outline-warning">Warning</span>
                    <span class="badge badge-outline-danger">Danger</span>
                    <span class="badge badge-outline-info">Info</span>
                </div>
            </div>

            <!-- Dot Badges -->
            <div class="badge-showcase">
                <h3>Dot Badges</h3>
                <div class="badge-group">
                    <span class="badge badge-dot">Default</span>
                    <span class="badge badge-dot badge-primary">Primary</span>
                    <span class="badge badge-dot badge-success">Success</span>
                    <span class="badge badge-dot badge-warning">Warning</span>
                    <span class="badge badge-dot badge-danger">Danger</span>
                    <span class="badge badge-dot badge-info">Info</span>
                </div>
            </div>
        </section>