<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Links')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Links')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Links')) ?>

                    <div class="container">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Colored Links</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        You can apply different colors to links to match your design and highlight important actions. These links include built-in hover and focus states to improve usability and visual feedback. Lighter-colored links should be used on dark
                                        backgrounds to ensure proper contrast and accessibility.
                                    </p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover" href="#">Primary link</a>
<a class="text-secondary hover:text-secondary-hover" href="#">Secondary link</a>
<a class="text-success hover:text-success-hover" href="#">Success link</a>
<a class="text-danger hover:text-danger-hover" href="#">Danger link</a>
<a class="text-warning hover:text-warning-hover" href="#">Warning link</a>
<a class="text-info hover:text-info-hover" href="#">Info link</a>
<a class="text-light hover:text-light-hover" href="#">Light link</a>
<a class="text-dark hover:text-dark-hover" href="#">Dark link</a>
<a class="text-default-700 hover:text-default-500" href="#">Emphasis link</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Link Utilities</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Colored link helpers have been updated to work seamlessly with our link utilities. Use these utilities to control link opacity, underline opacity, and underline offset.</p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover underline" href="#">Primary link</a>
<a class="text-secondary hover:text-secondary-hover underline" href="#">Secondary link</a>
<a class="text-success hover:text-success-hover underline" href="#">Success link</a>
<a class="text-danger hover:text-danger-hover underline" href="#">Danger link</a>
<a class="text-warning hover:text-warning-hover underline" href="#">Warning link</a>
<a class="text-info hover:text-info-hover underline" href="#">Info link</a>
<a class="text-light hover:text-light-hover underline" href="#">Light link</a>
<a class="text-dark hover:text-dark-hover underline" href="#">Dark link</a>
<a class="text-default-700 hover:text-default-500 underline" href="#">Emphasis link</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Link Opacity</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">You can adjust the transparency of link colors using utility options. Keep in mind that reducing opacity may result in links with insufficient contrast.</p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover opacity-10" href="#">Link opacity 10</a>
<a class="text-primary hover:text-primary-hover opacity-25" href="#">Link opacity 25</a>
<a class="text-primary hover:text-primary-hover opacity-50" href="#">Link opacity 50</a>
<a class="text-primary hover:text-primary-hover opacity-75" href="#">Link opacity 75</a>
<a class="text-primary hover:text-primary-hover opacity-100" href="#">Link opacity 100</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Link Hover Opacity</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">You can even change the opacity level on hover.</p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover hover:opacity-10" href="#">Link opacity 10</a>
<a class="text-primary hover:text-primary-hover hover:opacity-25" href="#">Link opacity 25</a>
<a class="text-primary hover:text-primary-hover hover:opacity-50" href="#">Link opacity 50</a>
<a class="text-primary hover:text-primary-hover hover:opacity-75" href="#">Link opacity 75</a>
<a class="text-primary hover:text-primary-hover hover:opacity-100" href="#">Link opacity 100</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Underline Color</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Change the underline’s color independent of the link text color.</p>
<div class="flex flex-col gap-4">
<a class="decoration-primary text-primary hover:text-primary-hover underline" href="#">Primary underline</a>
<a class="decoration-secondary text-primary hover:text-primary-hover underline" href="#">Secondary underline</a>
<a class="decoration-success text-primary hover:text-primary-hover underline" href="#">Success underline</a>
<a class="decoration-danger text-primary hover:text-primary-hover underline" href="#">Danger underline</a>
<a class="decoration-warning text-primary hover:text-primary-hover underline" href="#">Warning underline</a>
<a class="decoration-info text-primary hover:text-primary-hover underline" href="#">Info underline</a>
<a class="decoration-light text-primary hover:text-primary-hover underline" href="#">Light underline</a>
<a class="decoration-dark text-primary hover:text-primary-hover underline" href="#">Dark underline</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Underline Opacity</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Adjust the underline’s transparency to better match your design. Make sure an underline style is applied first so the opacity changes are visible.</p>
<div class="flex flex-col gap-4">
<a class="decoration-primary/0 text-primary hover:text-primary-hover underline" href="#">Underline opacity 0</a>
<a class="decoration-primary/15 text-primary hover:text-primary-hover underline" href="#">Underline opacity 10</a>
<a class="decoration-primary/25 text-primary hover:text-primary-hover underline" href="#">Underline opacity 25</a>
<a class="decoration-primary/50 text-primary hover:text-primary-hover underline" href="#">Underline opacity 50</a>
<a class="decoration-primary/75 text-primary hover:text-primary-hover underline" href="#">Underline opacity 75</a>
<a class="decoration-primary text-primary hover:text-primary-hover underline" href="#">Underline opacity 100</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Underline Offset</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Change the underline’s opacity to control its visual emphasis. An underline must be applied first so that opacity adjustments can take effect.</p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover" href="#">Default link</a>
<a class="text-primary hover:text-primary-hover underline" href="#">Offset 1 link</a>
<a class="text-primary hover:text-primary-hover underline" href="#">Offset 2 link</a>
<a class="text-primary hover:text-primary-hover underline" href="#">Offset 3 link</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Hover Variants</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">These link styling options also include hover states by default. Feel free to combine different settings to create unique and expressive link styles.</p>
<div class="flex flex-col gap-4">
<a class="text-primary hover:text-primary-hover hover:underline" href="#">Underline opacity 0</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>