<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-badges.html.twig */
class __TwigTemplate_20b9f4787de65cb61aed2d440d29af12 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-badges.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-badges.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-badges.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Badges
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Badges"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tA simple labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and
\t\t\t\t\t\t<code>em</code>
\t\t\t\t\t\tunits.
\t\t\t\t\t</p>

\t\t\t\t\t<h1>h1.Example heading
\t\t\t\t\t\t<span class=\"badge bg-secondary text-light\">New</span>
\t\t\t\t\t</h1>
\t\t\t\t\t<h2>h2.Example heading
\t\t\t\t\t\t<span class=\"badge bg-success-subtle text-success\">New</span>
\t\t\t\t\t</h2>
\t\t\t\t\t<h3>h2.Example heading
\t\t\t\t\t\t<span class=\"badge bg-primary\">New</span>
\t\t\t\t\t</h3>
\t\t\t\t\t<h4>h4.Example heading
\t\t\t\t\t\t<a href=\"#\" class=\"badge bg-info-subtle text-info\">Info Link</a>
\t\t\t\t\t</h4>
\t\t\t\t\t<h5>h5.Example heading
\t\t\t\t\t\t<span class=\"badge badge-outline-warning\">New</span>
\t\t\t\t\t</h5>
\t\t\t\t\t<h6>h6.Example heading
\t\t\t\t\t\t<span class=\"badge bg-danger\">New</span>
\t\t\t\t\t</h6>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Pill Badges</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse the
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tmodifier class to make badges more rounded.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary text-light rounded-pill\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger rounded-pill\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning rounded-pill\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info rounded-pill\">Info</span>
\t\t\t\t\t<span class=\"badge text-bg-light rounded-pill\">Light</span>
\t\t\t\t\t<span class=\"badge text-bg-dark rounded-pill\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Lighten Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse the
\t\t\t\t\t\t<code>.bg-*-subtle text-*</code>
\t\t\t\t\t\tmodifier class to make badges lighten.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary-subtle text-primary rounded-pill\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary-subtle text-secondary rounded-pill\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success-subtle text-success rounded-pill\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger-subtle text-danger rounded-pill\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning-subtle text-warning rounded-pill\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info-subtle text-info rounded-pill\">Info</span>
\t\t\t\t\t<span class=\"badge bg-dark-subtle text-dark rounded-pill\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Outline Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.badge-outline-*</code>
\t\t\t\t\t\tto quickly create a bordered badges.
\t\t\t\t\t</p>

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

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual variations</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tAdd any of the below mentioned modifier classes to change the appearance of a badge.
\t\t\t\t\t\t                                            Badge can be more contextual as well. Just use regular convention e.g.
\t\t\t\t\t\t<code>badge-*color</code>,
\t\t\t\t\t\t<code>bg-primary</code>
\t\t\t\t\t\tto have badge with different background.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary text-light\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info\">Info</span>
\t\t\t\t\t<span class=\"badge bg-pink\">Pink</span>
\t\t\t\t\t<span class=\"badge bg-purple\">Purple</span>
\t\t\t\t\t<span class=\"badge bg-light text-dark\">Light</span>
\t\t\t\t\t<span class=\"badge bg-dark text-light\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Lighten Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.bg-*-subtle text-*</code>
\t\t\t\t\t\tmodifier class, you can have more soften variation.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary-subtle text-primary\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary-subtle text-secondary\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success-subtle text-success\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger-subtle text-danger\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning-subtle text-warning\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info-subtle text-info\">Info</span>
\t\t\t\t\t<span class=\"badge bg-dark-subtle text-dark\">Dark</span>
\t\t\t\t\t<span class=\"badge bg-pink-subtle text-pink\">Pink</span>
\t\t\t\t\t<span class=\"badge bg-purple-subtle text-purple\">Purple</span>

\t\t\t\t\t<h5 class=\"mt-4\">Outline Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.badge-outline-*</code>
\t\t\t\t\t\tto quickly create a bordered badges.
\t\t\t\t\t</p>

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

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Badge Positioned</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse utilities to modify a
\t\t\t\t\t\t<code>.badge</code>
\t\t\t\t\t\tand position it in the corner of a
\t\t\t\t\t\t                                            link or button.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary position-relative\">
\t\t\t\t\t\t\t\tInbox
\t\t\t\t\t\t\t\t<span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger\">
\t\t\t\t\t\t\t\t\t99+
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">unread messages</span>
\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary position-relative\">
\t\t\t\t\t\t\t\tProfile
\t\t\t\t\t\t\t\t<span class=\"position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle\">
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">New alerts</span>
\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success mt-4\">
\t\t\t\t\t\t\t\tNotifications
\t\t\t\t\t\t\t\t<span class=\"badge bg-light text-dark ms-1\">4</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>

\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-badges.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Badges
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Badges' }) }}
{% endblock %}

{% block body %}

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tA simple labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and
\t\t\t\t\t\t<code>em</code>
\t\t\t\t\t\tunits.
\t\t\t\t\t</p>

\t\t\t\t\t<h1>h1.Example heading
\t\t\t\t\t\t<span class=\"badge bg-secondary text-light\">New</span>
\t\t\t\t\t</h1>
\t\t\t\t\t<h2>h2.Example heading
\t\t\t\t\t\t<span class=\"badge bg-success-subtle text-success\">New</span>
\t\t\t\t\t</h2>
\t\t\t\t\t<h3>h2.Example heading
\t\t\t\t\t\t<span class=\"badge bg-primary\">New</span>
\t\t\t\t\t</h3>
\t\t\t\t\t<h4>h4.Example heading
\t\t\t\t\t\t<a href=\"#\" class=\"badge bg-info-subtle text-info\">Info Link</a>
\t\t\t\t\t</h4>
\t\t\t\t\t<h5>h5.Example heading
\t\t\t\t\t\t<span class=\"badge badge-outline-warning\">New</span>
\t\t\t\t\t</h5>
\t\t\t\t\t<h6>h6.Example heading
\t\t\t\t\t\t<span class=\"badge bg-danger\">New</span>
\t\t\t\t\t</h6>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Pill Badges</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse the
\t\t\t\t\t\t<code>.rounded-pill</code>
\t\t\t\t\t\tmodifier class to make badges more rounded.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary text-light rounded-pill\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger rounded-pill\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning rounded-pill\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info rounded-pill\">Info</span>
\t\t\t\t\t<span class=\"badge text-bg-light rounded-pill\">Light</span>
\t\t\t\t\t<span class=\"badge text-bg-dark rounded-pill\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Lighten Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse the
\t\t\t\t\t\t<code>.bg-*-subtle text-*</code>
\t\t\t\t\t\tmodifier class to make badges lighten.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary-subtle text-primary rounded-pill\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary-subtle text-secondary rounded-pill\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success-subtle text-success rounded-pill\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger-subtle text-danger rounded-pill\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning-subtle text-warning rounded-pill\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info-subtle text-info rounded-pill\">Info</span>
\t\t\t\t\t<span class=\"badge bg-dark-subtle text-dark rounded-pill\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Outline Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.badge-outline-*</code>
\t\t\t\t\t\tto quickly create a bordered badges.
\t\t\t\t\t</p>

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

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual variations</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tAdd any of the below mentioned modifier classes to change the appearance of a badge.
\t\t\t\t\t\t                                            Badge can be more contextual as well. Just use regular convention e.g.
\t\t\t\t\t\t<code>badge-*color</code>,
\t\t\t\t\t\t<code>bg-primary</code>
\t\t\t\t\t\tto have badge with different background.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary text-light\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info\">Info</span>
\t\t\t\t\t<span class=\"badge bg-pink\">Pink</span>
\t\t\t\t\t<span class=\"badge bg-purple\">Purple</span>
\t\t\t\t\t<span class=\"badge bg-light text-dark\">Light</span>
\t\t\t\t\t<span class=\"badge bg-dark text-light\">Dark</span>

\t\t\t\t\t<h5 class=\"mt-4\">Lighten Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.bg-*-subtle text-*</code>
\t\t\t\t\t\tmodifier class, you can have more soften variation.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"badge bg-primary-subtle text-primary\">Primary</span>
\t\t\t\t\t<span class=\"badge bg-secondary-subtle text-secondary\">Secondary</span>
\t\t\t\t\t<span class=\"badge bg-success-subtle text-success\">Success</span>
\t\t\t\t\t<span class=\"badge bg-danger-subtle text-danger\">Danger</span>
\t\t\t\t\t<span class=\"badge bg-warning-subtle text-warning\">Warning</span>
\t\t\t\t\t<span class=\"badge bg-info-subtle text-info\">Info</span>
\t\t\t\t\t<span class=\"badge bg-dark-subtle text-dark\">Dark</span>
\t\t\t\t\t<span class=\"badge bg-pink-subtle text-pink\">Pink</span>
\t\t\t\t\t<span class=\"badge bg-purple-subtle text-purple\">Purple</span>

\t\t\t\t\t<h5 class=\"mt-4\">Outline Badges</h5>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the
\t\t\t\t\t\t<code>.badge-outline-*</code>
\t\t\t\t\t\tto quickly create a bordered badges.
\t\t\t\t\t</p>

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

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Badge Positioned</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUse utilities to modify a
\t\t\t\t\t\t<code>.badge</code>
\t\t\t\t\t\tand position it in the corner of a
\t\t\t\t\t\t                                            link or button.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary position-relative\">
\t\t\t\t\t\t\t\tInbox
\t\t\t\t\t\t\t\t<span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger\">
\t\t\t\t\t\t\t\t\t99+
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">unread messages</span>
\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary position-relative\">
\t\t\t\t\t\t\t\tProfile
\t\t\t\t\t\t\t\t<span class=\"position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle\">
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">New alerts</span>
\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-6\">
\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success mt-4\">
\t\t\t\t\t\t\t\tNotifications
\t\t\t\t\t\t\t\t<span class=\"badge bg-light text-dark ms-1\">4</span>
\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>

\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

{% endblock %}
", "ui-badges.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-badges.html.twig");
    }
}
