- var page_Title = 'Navigate Links';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Navigate Links
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Navigate Links
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Link Utilities 
                    p.f-m-light.mt-1
                      | Colored links can also be modified by our 
                      code link utilities
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    p.mb-4
                      a.link-primary.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link primary
                    p.mb-4
                      a.link-secondary.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link secondary
                    p.mb-4
                      a.link-success.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link success
                    p.mb-4
                      a.link-danger.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link danger
                    p.mb-4
                      a.link-warning.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link warning
                    p.mb-4
                      a.link-info.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link info
                    p.mb-4
                      a.link-light.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link light
                    p.mb-4
                      a.link-dark.link-offset-2.link-underline-opacity-25.link-underline-opacity-100-hover(href='#!') Link dark
                    p.mb-4
                      a.link-body-emphasis.link-offset-2.link-underline-opacity-25.link-underline-opacity-75-hover(href='#!') Link emphasis
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#link-utilities', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#link-utilities
                          |&lt;p&gt;&lt;a class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link primary&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link secondary&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link success&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link danger&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link warning&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link info&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link light&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!"&gt;Link dark&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover" href="#!"&gt;Link emphasis&lt;/a&gt;&lt;/p&gt;

              div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Link Underlines 
                    p.f-m-light.mt-1
                      | Use 
                      code link-underline-* 
                      | classes to link underlines. Change the underline's color independent of the link text color.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    p.mb-4
                      a.link-underline-primary(href='#!') Primary underline
                    p.mb-4
                      a.link-underline-secondary(href='#!') Secondary underline
                    p.mb-4
                      a.link-underline-success(href='#!') Success underline
                    p.mb-4
                      a.link-underline-danger(href='#!') Danger underline
                    p.mb-4
                      a.link-underline-warning(href='#!') Warning underline
                    p.mb-4
                      a.link-underline-info(href='#!') Info underline
                    p.mb-4
                      a.link-underline-light(href='#!') Light underline
                    p.mb-4
                      a.link-underline-dark(href='#!') Dark underline
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#link-underline', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#link-underline
                          |&lt;p&gt;&lt;a class="link-underline-primary" href="#!"&gt;Primary underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-secondary" href="#!"&gt;Secondary underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-success" href="#!"&gt;Success underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-danger" href="#!"&gt;Danger underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-warning" href="#!"&gt;Warning underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-info" href="#!"&gt;Info underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-light" href="#!"&gt;Light underline&lt;/a&gt;&lt;/p&gt;
                          |&lt;p&gt;&lt;a class="link-underline-dark" href="#!"&gt;Dark underline&lt;/a&gt;&lt;/p&gt;
              div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Border Opacity
                    p.f-m-light.mt-1
                      | Use 
                      code border-opacity-* (10,25,50,75)
                      |  class to border opacity links.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.border-opacity-wrapper
                    .p-2.mb-4.border-primary 
                      a(href="#!") This is default primary border
                    .p-2.mb-4.border-opacity-75
                      a(href="#!") This is 75% opacity primary border
                    .p-2.mb-4.border-opacity-50
                      a(href="#!") This is 50% opacity primary border
                    .p-2.mb-4.border-opacity-25
                      a(href="#!") This is 25% opacity primary border
                    .p-2.border-opacity-10
                      a(href="#!") This is 10% opacity primary border
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#border-opacity', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#border-opacity
                          |&lt;div class="card-body border-opacity-wrapper"&gt;
                          |  &lt;div class="border p-2 mb-xl-3 mb-2 border-primary"&gt;&lt;a href="#!"&gt;This is default primary border&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="border p-2 mb-xl-3 mb-2 border-opacity-75"&gt;&lt;a href="#!"&gt;This is 75% opacity primary border&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="border p-2 mb-xl-3 mb-2 border-opacity-50"&gt;&lt;a href="#!"&gt;This is 50% opacity primary border&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="border p-2 mb-xl-3 mb-2 border-opacity-25"&gt;&lt;a href="#!"&gt;This is 25% opacity primary border&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="border p-2 border-opacity-10"&gt;&lt;a href="#!"&gt;This is 10% opacity primary border&lt;/a&gt;&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Background Color Opacity
                    p.f-m-light.mt-1
                      | Use 
                      code bg-opacity-* (10,25,50,75)
                      |  class to background opacity links.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.bg-opacity-wrapper
                    .bg-primary.p-2.mb-4
                      a(href="#!" class="!text-white") This is default success background
                    .p-2.mb-4.text-white.bg-opacity-75
                      a(href="#!" class="!text-white") This is 75% opacity success background
                    .p-2.mb-4.text-dark.bg-opacity-50
                      a(href="#!" class="!text-white") This is 50% opacity success background
                    .p-2.mb-4.text-dark.bg-opacity-25
                      a(href="#!" ) This is 25% opacity success background
                    .p-2.mb-4.text-dark.bg-opacity-10
                      a(href="#!" ) This is 10% opacity success background
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#bg-color-opacity', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#bg-color-opacity
                          |&lt;div class="card-body bg-opacity-wrapper"&gt;
                          |  &lt;div class="bg-primary p-2 mb-3 text-white"&gt;&lt;a href="#!"&gt;This is default success background&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="p-2 mb-3 text-white bg-opacity-75"&gt;&lt;a href="#!"&gt;This is 75% opacity success background&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="p-2 mb-3 text-dark bg-opacity-50"&gt;&lt;a href="#!"&gt;This is 50% opacity success background&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="p-2 mb-3 text-dark bg-opacity-25"&gt;&lt;a href="#!"&gt;This is 25% opacity success background&lt;/a&gt;&lt;/div&gt;
                          |  &lt;div class="p-2 mb-3 text-dark bg-opacity-10"&gt;&lt;a href="#!"&gt;This is 10% opacity success background&lt;/a&gt;&lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Common Links
                    p.f-m-light.mt-1
                      | Link utilities are used to stylize your anchors to adjust their link opacity 
                      code  (link-opacity-*), 
                      | hovered link Opacity 
                      code (link-opacity-*-hover), 
                      | underline opacity 
                      code (link-underline-opacity-*), 
                      | underline offset 
                      code (link-offset-*), 
                      | and more.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Link Opacity
                          .link-opacity-wrapper 
                            p.mb-4
                              a.opacity-10(href='#!') Link opacity 10
                            p.mb-4
                              a.opacity-25(href='#!') Link opacity 25
                            p.mb-4
                              a.opacity-50(href='#!') Link opacity 50
                            p.mb-4
                              a.opacity-75(href='#!') Link opacity 75
                            p.mb-4
                              a.opacity-100(href='#!') Link opacity 100
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold  Hovered Link Opacity
                          .link-opacity-wrapper 
                            p.mb-4
                              a(href='#!' class="hover:opacity-10") Link hover opacity 10
                            p.mb-4
                              a(href='#!' class="hover:opacity-25") Link hover opacity 25
                            p.mb-4
                              a(href='#!' class="hover:opacity-50") Link hover opacity 50
                            p.mb-4
                              a(href='#!' class="hover:opacity-75") Link hover opacity 75
                            p.mb-4
                              a(href='#!' class="hover:opacity-1") Link hover opacity 100
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Underline Opacity
                          .underline-opacity-wrapper
                            p.mb-4
                              a.link-offset-2.underline-opacity-0(href='#!') Underline opacity 0
                            p.mb-4
                              a.link-offset-2.underline-opacity-10(href='#!') Underline opacity 10
                            p.mb-4
                              a.link-offset-2.underline-opacity-25(href='#!') Underline opacity 25
                            p.mb-4
                              a.link-offset-2.underline-opacity-50(href='#!') Underline opacity 50
                            p.mb-4
                              a.link-offset-2.underline-opacity-75(href='#!') Underline opacity 75
                            p.mb-4
                              a.link-offset-2.underline-opacity-100(href='#!') Underline opacity 100
                      div(class="col-span-3 xxl:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title.fw-bold Underline Offset
                          .underline-opacity-wrapper
                            p.underline.mb-4
                              a(href='#!') Default link
                            p.mb-4
                              a.underline(href='#!') Offset 1 link
                            p.mb-4
                              a.underline(href='#!') Offset 2 link
                            p.mb-4
                              a.underline(href='#!') Offset 3 link
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#common-link', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#common-link
                          |&lt;div class="grid grid-cols-12 gap-3"&gt;
                          |  &lt;div class="col-span-3 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |      &lt;h6 class="sub-title fw-bold"&gt;Link Opacity&lt;/h6&gt;
                          |      &lt;div class="link-opacity-wrapper"&gt; 
                          |        &lt;p&gt;&lt;a class="link-opacity-10" href="#!"&gt;Link opacity 10&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-25" href="#!"&gt;Link opacity 25&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-50" href="#!"&gt;Link opacity 50&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-75" href="#!"&gt;Link opacity 75&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-100" href="#!"&gt;Link opacity 100&lt;/a&gt;&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-3 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |      &lt;h6 class="sub-title fw-bold"&gt; Hovered Link Opacity&lt;/h6&gt;
                          |      &lt;div class="link-opacity-wrapper"&gt; 
                          |        &lt;p&gt;&lt;a class="link-opacity-10-hover" href="#!"&gt;Link hover opacity 10&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-25-hover" href="#!"&gt;Link hover opacity 25&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-50-hover" href="#!"&gt;Link hover opacity 50&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-75-hover" href="#!"&gt;Link hover opacity 75&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-opacity-100-hover" href="#!"&gt;Link hover opacity 100&lt;/a&gt;&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-3 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |      &lt;h6 class="sub-title fw-bold"&gt;Underline Opacity&lt;/h6&gt;
                          |      &lt;div class="underline-opacity-wrapper"&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-0" href="#!"&gt;Underline opacity 0&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-10" href="#!"&gt;Underline opacity 10&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-25" href="#!"&gt;Underline opacity 25&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-50" href="#!"&gt;Underline opacity 50&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-75" href="#!"&gt;Underline opacity 75&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2 link-underline link-underline-opacity-100" href="#!"&gt;Underline opacity 100&lt;/a&gt;&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-3 xxl:col-span-6 sm:col-span-12"&gt;
                          |    &lt;div class="card-wrapper custom-border rounded-3 h-full"&gt;
                          |      &lt;h6 class="sub-title fw-bold"&gt;Underline Offset&lt;/h6&gt;
                          |      &lt;div class="underline-opacity-wrapper"&gt;
                          |        &lt;p&gt;&lt;a href="#!"&gt;Default link&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-1" href="#!"&gt;Offset 1 link&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-2" href="#!"&gt;Offset 2 link&lt;/a&gt;&lt;/p&gt;
                          |        &lt;p&gt;&lt;a class="link-offset-3" href="#!"&gt;Offset 3 link&lt;/a&gt;&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
