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

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-links.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 "Links
";
        
        $__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" => "Links"]);
        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\">Colored Links</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">You can use the
\t\t\t\t\t\t<code>.link-*</code>
\t\t\t\t\t\tclasses to colorize links. Unlike the
\t\t\t\t\t\t<a href=\"ui-utilities.html\">
\t\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\t\tclasses</a>, these classes have a
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>:focus</code>
\t\t\t\t\t\tstate. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-primary\">Primary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-secondary\">Secondary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-success\">Success link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-danger\">Danger link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-warning\">Warning link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-info\">Info link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-light\">Light link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-dark\">Dark link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a href=\"#\" class=\"link-body-emphasis\">Emphasis link</a>
\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-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\">Link Utilities</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">
\t\t\t\t\t\t<a href=\"ui-utilities.html\">Colored link helpers</a>
\t\t\t\t\t\thave been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-primary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Primary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-secondary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Secondary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-success text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Success link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-danger text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Danger link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-warning text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Warning link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-info text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Info link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-light text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Light link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-dark text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Dark link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-body-emphasis text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover\">Emphasis link</a>
\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-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\">Link Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the alpha opacity of the link
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor value with utilities. Please be aware that changes to a color’s opacity can lead to links with
\t\t\t\t\t\t<em>insufficient</em>
\t\t\t\t\t\tcontrast.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-10\" href=\"#\">Link opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-25\" href=\"#\">Link opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-50\" href=\"#\">Link opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-75\" href=\"#\">Link opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"link-opacity-100\" href=\"#\">Link opacity 100</a>
\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-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\">Link Hover Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">You can even change the opacity level on hover.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-10-hover\" href=\"#\">Link hover opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-25-hover\" href=\"#\">Link hover opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-50-hover\" href=\"#\">Link hover opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-75-hover\" href=\"#\">Link hover opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"link-opacity-100-hover\" href=\"#\">Link hover opacity 100</a>
\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-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\">Underline Color</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s color independent of the link text color.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-primary\">Primary underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-secondary\">Secondary underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-success\">Success underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-danger\">Danger underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-warning\">Warning underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-info\">Info underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-light\">Light underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-dark\">Dark underline</a>
\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-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\">Underline Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s opacity. Requires adding
\t\t\t\t\t\t<code>.link-underline</code>
\t\t\t\t\t\tto first set an
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor we use to then modify the alpha opacity.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-0\" href=\"#\">Underline opacity 0</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-10\" href=\"#\">Underline opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-25\" href=\"#\">Underline opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-50\" href=\"#\">Underline opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-75\" href=\"#\">Underline opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-100\" href=\"#\">Underline opacity 100</a>
\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-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\">Underline Offset</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s opacity. Requires adding
\t\t\t\t\t\t<code>.link-underline</code>
\t\t\t\t\t\tto first set an
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor we use to then modify the alpha opacity.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\">Default link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-1\" href=\"#\">Offset 1 link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2\" href=\"#\">Offset 2 link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-3\" href=\"#\">Offset 3 link</a>
\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-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\">Hover Variants</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Just like the
\t\t\t\t\t\t<code>.link-opacity-*-hover</code>
\t\t\t\t\t\tutilities,
\t\t\t\t\t\t<code>.link-offset</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.link-underline-opacity</code>
\t\t\t\t\t\tutilities include
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tvariants by default. Mix and match to create unique link styles.</p>

\t\t\t\t\t<a class=\"link-offset-2 link-offset-3-hover text-decoration-underline link-underline link-underline-opacity-0 link-underline-opacity-75-hover\" href=\"#\">
\t\t\t\t\t\tUnderline opacity 0
\t\t\t\t\t</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-->

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

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

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

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Links' }) }}
{% 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\">Colored Links</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">You can use the
\t\t\t\t\t\t<code>.link-*</code>
\t\t\t\t\t\tclasses to colorize links. Unlike the
\t\t\t\t\t\t<a href=\"ui-utilities.html\">
\t\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\t\tclasses</a>, these classes have a
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>:focus</code>
\t\t\t\t\t\tstate. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-primary\">Primary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-secondary\">Secondary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-success\">Success link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-danger\">Danger link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-warning\">Warning link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-info\">Info link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-light\">Light link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-dark\">Dark link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a href=\"#\" class=\"link-body-emphasis\">Emphasis link</a>
\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-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\">Link Utilities</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">
\t\t\t\t\t\t<a href=\"ui-utilities.html\">Colored link helpers</a>
\t\t\t\t\t\thave been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-primary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Primary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-secondary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Secondary link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-success text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Success link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-danger text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Danger link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-warning text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Warning link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-info text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Info link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-light text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Light link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-dark text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\">Dark link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"link-body-emphasis text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover\">Emphasis link</a>
\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-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\">Link Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the alpha opacity of the link
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor value with utilities. Please be aware that changes to a color’s opacity can lead to links with
\t\t\t\t\t\t<em>insufficient</em>
\t\t\t\t\t\tcontrast.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-10\" href=\"#\">Link opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-25\" href=\"#\">Link opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-50\" href=\"#\">Link opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-75\" href=\"#\">Link opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"link-opacity-100\" href=\"#\">Link opacity 100</a>
\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-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\">Link Hover Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">You can even change the opacity level on hover.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-10-hover\" href=\"#\">Link hover opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-25-hover\" href=\"#\">Link hover opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-50-hover\" href=\"#\">Link hover opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"link-opacity-75-hover\" href=\"#\">Link hover opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"link-opacity-100-hover\" href=\"#\">Link hover opacity 100</a>
\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-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\">Underline Color</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s color independent of the link text color.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-primary\">Primary underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-secondary\">Secondary underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-success\">Success underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-danger\">Danger underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-warning\">Warning underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-info\">Info underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-light\">Light underline</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a href=\"#\" class=\"text-decoration-underline link-underline-dark\">Dark underline</a>
\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-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\">Underline Opacity</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s opacity. Requires adding
\t\t\t\t\t\t<code>.link-underline</code>
\t\t\t\t\t\tto first set an
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor we use to then modify the alpha opacity.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-0\" href=\"#\">Underline opacity 0</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-10\" href=\"#\">Underline opacity 10</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-25\" href=\"#\">Underline opacity 25</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-50\" href=\"#\">Underline opacity 50</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-75\" href=\"#\">Underline opacity 75</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2 link-underline link-underline-opacity-100\" href=\"#\">Underline opacity 100</a>
\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-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\">Underline Offset</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Change the underline’s opacity. Requires adding
\t\t\t\t\t\t<code>.link-underline</code>
\t\t\t\t\t\tto first set an
\t\t\t\t\t\t<code>rgba()</code>
\t\t\t\t\t\tcolor we use to then modify the alpha opacity.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\">Default link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-1\" href=\"#\">Offset 1 link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-2\" href=\"#\">Offset 2 link</a>
\t\t\t\t\t</p>
\t\t\t\t\t<p class=\"mb-0\">
\t\t\t\t\t\t<a class=\"text-decoration-underline link-offset-3\" href=\"#\">Offset 3 link</a>
\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-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\">Hover Variants</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Just like the
\t\t\t\t\t\t<code>.link-opacity-*-hover</code>
\t\t\t\t\t\tutilities,
\t\t\t\t\t\t<code>.link-offset</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.link-underline-opacity</code>
\t\t\t\t\t\tutilities include
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tvariants by default. Mix and match to create unique link styles.</p>

\t\t\t\t\t<a class=\"link-offset-2 link-offset-3-hover text-decoration-underline link-underline link-underline-opacity-0 link-underline-opacity-75-hover\" href=\"#\">
\t\t\t\t\t\tUnderline opacity 0
\t\t\t\t\t</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-->

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