<?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-placeholders.html.twig */
class __TwigTemplate_4b967605929ff69ced25a822c9a9d401 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-placeholders.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-placeholders.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-placeholders.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 "Placeholders
";
        
        $__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" => "Placeholders"]);
        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\">Placeholders</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tIn the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<div class=\"card border shadow-none mb-md-0\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"card-img-top\" alt=\"...\">

\t\t\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's
\t\t\t\t\t\t\t\t\t\t                                                            content.</p>
\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end card-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col-->

\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<div class=\"card border shadow-none mb-0\" aria-hidden=\"true\">
\t\t\t\t\t\t\t\t<svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"180\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder\" preserveaspectratio=\"xMidYMid slice\" focusable=\"false\">
\t\t\t\t\t\t\t\t\t<title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#20c997\"/></svg>
\t\t\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"card-title placeholder-glow\">
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t\t\t<p class=\"card-text placeholder-glow\">
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-7\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-4\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-4\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-8\"></span>
\t\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t\t<a href=\"#\" tabindex=\"-1\" class=\"btn btn-primary disabled placeholder col-6\"></a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end card-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row-->

\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\">Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tBy default, the
\t\t\t\t\t\t<code>placeholder</code>
\t\t\t\t\t\tuses
\t\t\t\t\t\t<code>currentColor</code>. This can be overriden with a custom color or utility class.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-primary\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-secondary\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-success\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-danger\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-warning\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-info\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-pink\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-purple\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-light\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-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\">Width</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tYou can change the
\t\t\t\t\t\t<code>width</code>
\t\t\t\t\t\tthrough grid column classes, width utilities, or inline styles.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t<span class=\"placeholder w-75\"></span>
\t\t\t\t\t<span class=\"placeholder\" style=\"width: 25%;\"></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\">Sizing</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tThe size of
\t\t\t\t\t\t<code>.placeholder</code>s are based on the typographic style of the parent element. Customize them with sizing modifiers:
\t\t\t\t\t\t<code>.placeholder-lg</code>,
\t\t\t\t\t\t<code>.placeholder-sm</code>, or
\t\t\t\t\t\t<code>.placeholder-xs</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-12 placeholder-lg\"></span>
\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 placeholder-sm\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 placeholder-xs\"></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\">How it works</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tCreate placeholders with the
\t\t\t\t\t\t<code>.placeholder</code>
\t\t\t\t\t\tclass and a grid column class (e.g.,
\t\t\t\t\t\t<code>.col-6</code>) to set the
\t\t\t\t\t\t<code>width</code>. They can replace the text inside an element or as be added as a modifier class to an existing component.
\t\t\t\t\t</p>

\t\t\t\t\t<p aria-hidden=\"true\">
\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t</p>

\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary disabled placeholder col-4\" aria-hidden=\"true\"></a>
\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\">Animation</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tAnimate placehodlers with
\t\t\t\t\t\t<code>.placeholder-glow</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>.placeholder-wave</code>
\t\t\t\t\t\tto better convey the perception of something being
\t\t\t\t\t\t<em>actively</em>
\t\t\t\t\t\tloaded.
\t\t\t\t\t</p>

\t\t\t\t\t<p class=\"placeholder-glow\">
\t\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t</p>

\t\t\t\t\t<p class=\"placeholder-wave mb-0\">
\t\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t</p>
\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</div>
\t<!-- end row -->

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

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-placeholders.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 %}Placeholders
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Placeholders' }) }}
{% 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\">Placeholders</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tIn the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<div class=\"card border shadow-none mb-md-0\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"card-img-top\" alt=\"...\">

\t\t\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's
\t\t\t\t\t\t\t\t\t\t                                                            content.</p>
\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end card-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col-->

\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<div class=\"card border shadow-none mb-0\" aria-hidden=\"true\">
\t\t\t\t\t\t\t\t<svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"180\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder\" preserveaspectratio=\"xMidYMid slice\" focusable=\"false\">
\t\t\t\t\t\t\t\t\t<title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#20c997\"/></svg>
\t\t\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"card-title placeholder-glow\">
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t\t\t<p class=\"card-text placeholder-glow\">
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-7\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-4\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-4\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t\t\t\t\t\t<span class=\"placeholder col-8\"></span>
\t\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t\t<a href=\"#\" tabindex=\"-1\" class=\"btn btn-primary disabled placeholder col-6\"></a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end card-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row-->

\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\">Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tBy default, the
\t\t\t\t\t\t<code>placeholder</code>
\t\t\t\t\t\tuses
\t\t\t\t\t\t<code>currentColor</code>. This can be overriden with a custom color or utility class.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-primary\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-secondary\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-success\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-danger\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-warning\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-info\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-pink\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-purple\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-light\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 bg-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\">Width</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tYou can change the
\t\t\t\t\t\t<code>width</code>
\t\t\t\t\t\tthrough grid column classes, width utilities, or inline styles.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t<span class=\"placeholder w-75\"></span>
\t\t\t\t\t<span class=\"placeholder\" style=\"width: 25%;\"></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\">Sizing</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tThe size of
\t\t\t\t\t\t<code>.placeholder</code>s are based on the typographic style of the parent element. Customize them with sizing modifiers:
\t\t\t\t\t\t<code>.placeholder-lg</code>,
\t\t\t\t\t\t<code>.placeholder-sm</code>, or
\t\t\t\t\t\t<code>.placeholder-xs</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<span class=\"placeholder col-12 placeholder-lg\"></span>
\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 placeholder-sm\"></span>
\t\t\t\t\t<span class=\"placeholder col-12 placeholder-xs\"></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\">How it works</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tCreate placeholders with the
\t\t\t\t\t\t<code>.placeholder</code>
\t\t\t\t\t\tclass and a grid column class (e.g.,
\t\t\t\t\t\t<code>.col-6</code>) to set the
\t\t\t\t\t\t<code>width</code>. They can replace the text inside an element or as be added as a modifier class to an existing component.
\t\t\t\t\t</p>

\t\t\t\t\t<p aria-hidden=\"true\">
\t\t\t\t\t\t<span class=\"placeholder col-6\"></span>
\t\t\t\t\t</p>

\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary disabled placeholder col-4\" aria-hidden=\"true\"></a>
\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\">Animation</h4>
\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\tAnimate placehodlers with
\t\t\t\t\t\t<code>.placeholder-glow</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>.placeholder-wave</code>
\t\t\t\t\t\tto better convey the perception of something being
\t\t\t\t\t\t<em>actively</em>
\t\t\t\t\t\tloaded.
\t\t\t\t\t</p>

\t\t\t\t\t<p class=\"placeholder-glow\">
\t\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t</p>

\t\t\t\t\t<p class=\"placeholder-wave mb-0\">
\t\t\t\t\t\t<span class=\"placeholder col-12\"></span>
\t\t\t\t\t</p>
\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</div>
\t<!-- end row -->

{% endblock %}", "ui-placeholders.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-placeholders.html.twig");
    }
}
