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

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-cards.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 "Cards
";
        
        $__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" => "Cards"]);
        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
\t\t\tclass=\"col-sm-6 col-lg-3\">

\t\t\t<!-- Simple card -->
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-1.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Button</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-2.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card..</p>
\t\t\t\t</div>
\t\t\t\t<ul class=\"list-group list-group-flush\">
\t\t\t\t\t<li class=\"list-group-item\">Cras justo odio</li>
\t\t\t\t</ul>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Card link</a>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Another link</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-3.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Button</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<h6 class=\"card-subtitle text-muted\">Support card subtitle</h6>
\t\t\t\t</div>
\t\t\t\t<img class=\"img-fluid\" src=\"/images/small/small-4.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Card link</a>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Another link</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</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-sm-6\">
\t\t\t<div class=\"card card-body\">
\t\t\t\t<h4 class=\"card-title\">Special title treatment</h4>
\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to additional
\t\t\t\t\t                                        content.</p>
\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-sm-6\">
\t\t\t<div class=\"card card-body\">
\t\t\t\t<h4 class=\"card-title\">Special title treatment</h4>
\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to additional
\t\t\t\t\t                                        content.</p>
\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<h5 class=\"card-header bg-light-subtle\">Featured</h5>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</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-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-header bg-light-subtle\">
\t\t\t\t\tQuote
\t\t\t\t</div>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-header bg-light-subtle\">
\t\t\t\t\tFeatured
\t\t\t\t</div>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t\t</div>
\t\t\t\t<div class=\"card-footer border-top border-light text-muted\">
\t\t\t\t\t2 days ago
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Colored</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-secondary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary btn-sm\">Button</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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-primary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-success\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-info\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-warning\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-danger\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-pink\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-purple\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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 -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Bordered</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-md-4\">
\t\t\t<div class=\"card border-secondary border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-secondary btn-sm\">Button</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-md-4\">
\t\t\t<div class=\"card border-primary border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title text-primary\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary btn-sm\">Button</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-md-4\">
\t\t\t<div class=\"card border-success border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title text-success\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-success btn-sm\">Button</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</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Horizontal Card</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"row g-0 align-items-center\">
\t\t\t\t\t<div class=\"col-md-4\">
\t\t\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"img-fluid rounded-start\" alt=\"...\">
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"col-md-8\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
\t\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t</div>
\t\t\t\t<!-- end row-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"row g-0 align-items-center\">
\t\t\t\t\t<div class=\"col-md-8\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
\t\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t\t<div class=\"col-md-4\">
\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"img-fluid rounded-end\" alt=\"...\">
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t</div>
\t\t\t\t<!-- end row-->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Stretched link</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Card with stretched link</h5>
\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary mt-2 stretched-link\">Go somewhere</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-3.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">
\t\t\t\t\t\t<a href=\"#\" class=\"text-success stretched-link\">Card with stretched link</a>
\t\t\t\t\t</h5>
\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\tSome quick example text to build on the card up the bulk of the card's content.
\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\t<div class=\"col-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Card with stretched link</h5>
\t\t\t\t\t<a href=\"#\" class=\"btn btn-info mt-2 stretched-link\">Go somewhere</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">
\t\t\t\t\t\t<a href=\"#\" class=\"stretched-link\">Card with stretched link</a>
\t\t\t\t\t</h5>
\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\tSome quick example text to build on the card up the bulk of the card's content.
\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 -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Group</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card-group\">
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-1.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a
\t\t\t\t\t\t\t                                                natural lead-in to additional content. This content is a little bit
\t\t\t\t\t\t\t                                                longer.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-2.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This card has supporting text below as a natural
\t\t\t\t\t\t\t                                                lead-in to additional content.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-3.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a
\t\t\t\t\t\t\t                                                natural lead-in to additional content. This card has even longer content
\t\t\t\t\t\t\t                                                than the first to show that equal height action.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-group-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"my-4\">Custom Card Portlets</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase1\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase1\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase1\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card text-bg-primary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase2\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase2\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase2\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card text-bg-info\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase3\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase3\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase3\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\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-cards.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 %}Cards
{% endblock %}

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

{% block body %}
\t<div class=\"row\">
\t\t<div
\t\t\tclass=\"col-sm-6 col-lg-3\">

\t\t\t<!-- Simple card -->
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-1.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Button</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-2.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card..</p>
\t\t\t\t</div>
\t\t\t\t<ul class=\"list-group list-group-flush\">
\t\t\t\t\t<li class=\"list-group-item\">Cras justo odio</li>
\t\t\t\t</ul>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Card link</a>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Another link</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-3.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Button</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card d-block\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"card-title\">Card title</h4>
\t\t\t\t\t<h6 class=\"card-subtitle text-muted\">Support card subtitle</h6>
\t\t\t\t</div>
\t\t\t\t<img class=\"img-fluid\" src=\"/images/small/small-4.jpg\" alt=\"Card image cap\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<p class=\"card-text\">Some quick example text to build on the card title and make
\t\t\t\t\t\t                                            up the bulk of the card's content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Card link</a>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"card-link text-custom\">Another link</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</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-sm-6\">
\t\t\t<div class=\"card card-body\">
\t\t\t\t<h4 class=\"card-title\">Special title treatment</h4>
\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to additional
\t\t\t\t\t                                        content.</p>
\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-sm-6\">
\t\t\t<div class=\"card card-body\">
\t\t\t\t<h4 class=\"card-title\">Special title treatment</h4>
\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to additional
\t\t\t\t\t                                        content.</p>
\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<h5 class=\"card-header bg-light-subtle\">Featured</h5>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</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-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-header bg-light-subtle\">
\t\t\t\t\tQuote
\t\t\t\t</div>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-md-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-header bg-light-subtle\">
\t\t\t\t\tFeatured
\t\t\t\t</div>
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary\">Go somewhere</a>
\t\t\t\t</div>
\t\t\t\t<div class=\"card-footer border-top border-light text-muted\">
\t\t\t\t\t2 days ago
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Colored</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-secondary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary btn-sm\">Button</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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-primary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-success\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-info\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-warning\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-danger\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-pink\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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-lg-4 col-sm-6\">
\t\t\t<div class=\"card text-bg-purple\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<blockquote class=\"card-bodyquote mb-0\">
\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
\t\t\t\t\t\t\t                                                erat a ante.</p>
\t\t\t\t\t\t<footer>Someone famous in
\t\t\t\t\t\t\t<cite title=\"Source Title\">Source Title</cite>
\t\t\t\t\t\t</footer>
\t\t\t\t\t</blockquote>
\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 -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Bordered</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-md-4\">
\t\t\t<div class=\"card border-secondary border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-secondary btn-sm\">Button</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-md-4\">
\t\t\t<div class=\"card border-primary border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title text-primary\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-primary btn-sm\">Button</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-md-4\">
\t\t\t<div class=\"card border-success border\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title text-success\">Special title treatment</h5>
\t\t\t\t\t<p class=\"card-text\">With supporting text below as a natural lead-in to
\t\t\t\t\t\t                                            additional content.</p>
\t\t\t\t\t<a href=\"javascript: void(0);\" class=\"btn btn-success btn-sm\">Button</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</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Horizontal Card</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"row g-0 align-items-center\">
\t\t\t\t\t<div class=\"col-md-4\">
\t\t\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"img-fluid rounded-start\" alt=\"...\">
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"col-md-8\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
\t\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t</div>
\t\t\t\t<!-- end row-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"row g-0 align-items-center\">
\t\t\t\t\t<div class=\"col-md-8\">
\t\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
\t\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end card-body -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t\t<div class=\"col-md-4\">
\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"img-fluid rounded-end\" alt=\"...\">
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end col -->
\t\t\t\t</div>
\t\t\t\t<!-- end row-->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Stretched link</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Card with stretched link</h5>
\t\t\t\t\t<a href=\"#\" class=\"btn btn-primary mt-2 stretched-link\">Go somewhere</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-3.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">
\t\t\t\t\t\t<a href=\"#\" class=\"text-success stretched-link\">Card with stretched link</a>
\t\t\t\t\t</h5>
\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\tSome quick example text to build on the card up the bulk of the card's content.
\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\t<div class=\"col-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">Card with stretched link</h5>
\t\t\t\t\t<a href=\"#\" class=\"btn btn-info mt-2 stretched-link\">Go somewhere</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-sm-6 col-lg-3\">
\t\t\t<div class=\"card\">
\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"card-img-top\" alt=\"...\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h5 class=\"card-title\">
\t\t\t\t\t\t<a href=\"#\" class=\"stretched-link\">Card with stretched link</a>
\t\t\t\t\t</h5>
\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\tSome quick example text to build on the card up the bulk of the card's content.
\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 -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"mb-4 mt-2\">Card Group</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card-group\">
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-1.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a
\t\t\t\t\t\t\t                                                natural lead-in to additional content. This content is a little bit
\t\t\t\t\t\t\t                                                longer.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-2.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This card has supporting text below as a natural
\t\t\t\t\t\t\t                                                lead-in to additional content.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<div class=\"card d-block\">
\t\t\t\t\t<img class=\"card-img-top\" src=\"/images/small/small-3.jpg\" alt=\"Card image cap\">
\t\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t\t<h5 class=\"card-title\">Card title</h5>
\t\t\t\t\t\t<p class=\"card-text\">This is a wider card with supporting text below as a
\t\t\t\t\t\t\t                                                natural lead-in to additional content. This card has even longer content
\t\t\t\t\t\t\t                                                than the first to show that equal height action.</p>
\t\t\t\t\t\t<p class=\"card-text\">
\t\t\t\t\t\t\t<small class=\"text-muted\">Last updated 3 mins ago</small>
\t\t\t\t\t\t</p>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-group-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<h4 class=\"my-4\">Custom Card Portlets</h4>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase1\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase1\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase1\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card text-bg-primary\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase2\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase2\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase2\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div
\t\t\tclass=\"col-md-4\">
\t\t\t<!-- Portlet card -->
\t\t\t<div class=\"card text-bg-info\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<div class=\"card-widgets\">
\t\t\t\t\t\t<a href=\"javascript:;\" data-bs-toggle=\"reload\">
\t\t\t\t\t\t\t<i class=\"ri-refresh-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a data-bs-toggle=\"collapse\" href=\"#cardCollpase3\" role=\"button\" aria-expanded=\"false\" aria-controls=\"cardCollpase3\">
\t\t\t\t\t\t\t<i class=\"ri-subtract-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" data-bs-toggle=\"remove\">
\t\t\t\t\t\t\t<i class=\"ri-close-line\"></i>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t\t<h5 class=\"card-title mb-0\">Card title</h5>

\t\t\t\t\t<div id=\"cardCollpase3\" class=\"collapse pt-3 show\">
\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
\t\t\t\t\t\t                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
\t\t\t\t\t\t                                            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
\t\t\t\t\t\t                                            labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
\t\t\t\t\t\t                                            beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
\t\t\t\t\t\t                                            VHS.
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

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