Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Navigate Links

##### Link Utilities

Colored links can also be modified by our `link utilities`.

Link primary

Link secondary

Link success

Link danger

Link warning

Link info

Link light

Link dark

Link emphasis

    <p><a class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link primary</a></p>
    <p><a class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link secondary</a></p>
    <p><a class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link success</a></p>
    <p><a class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link danger</a></p>
    <p><a class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link warning</a></p>
    <p><a class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link info</a></p>
    <p><a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link light</a></p>
    <p><a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link dark</a></p>
    <p><a class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover" href="#!">Link emphasis</a></p>

##### Link Underlines

Use `link-underline-*` classes to link underlines. Change the underline's color independent of the link text color.

Primary underline

Secondary underline

Success underline

Danger underline

Warning underline

Info underline

Light underline

Dark underline

    <p><a class="link-underline-primary" href="#!">Primary underline</a></p>
    <p><a class="link-underline-secondary" href="#!">Secondary underline</a></p>
    <p><a class="link-underline-success" href="#!">Success underline</a></p>
    <p><a class="link-underline-danger" href="#!">Danger underline</a></p>
    <p><a class="link-underline-warning" href="#!">Warning underline</a></p>
    <p><a class="link-underline-info" href="#!">Info underline</a></p>
    <p><a class="link-underline-light" href="#!">Light underline</a></p>
    <p><a class="link-underline-dark" href="#!">Dark underline</a></p>

##### Border Opacity

Use `border-opacity-* (10,25,50,75)` class to border opacity links.

This is default primary border
This is 75% opacity primary border
This is 50% opacity primary border
This is 25% opacity primary border
This is 10% opacity primary border

    <div class="card-body border-opacity-wrapper">
     <div class="border p-2 mb-xl-3 mb-2 border-primary"><a href="#!">This is default primary border</a></div>
     <div class="border p-2 mb-xl-3 mb-2 border-opacity-75"><a href="#!">This is 75% opacity primary border</a></div>
     <div class="border p-2 mb-xl-3 mb-2 border-opacity-50"><a href="#!">This is 50% opacity primary border</a></div>
     <div class="border p-2 mb-xl-3 mb-2 border-opacity-25"><a href="#!">This is 25% opacity primary border</a></div>
     <div class="border p-2 border-opacity-10"><a href="#!">This is 10% opacity primary border</a></div>
    </div>

##### Background Color Opacity

Use `bg-opacity-* (10,25,50,75)` class to background opacity links.

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background

    <div class="card-body bg-opacity-wrapper">
     <div class="bg-primary p-2 mb-3 text-white"><a href="#!">This is default success background</a></div>
     <div class="p-2 mb-3 text-white bg-opacity-75"><a href="#!">This is 75% opacity success background</a></div>
     <div class="p-2 mb-3 text-dark bg-opacity-50"><a href="#!">This is 50% opacity success background</a></div>
     <div class="p-2 mb-3 text-dark bg-opacity-25"><a href="#!">This is 25% opacity success background</a></div>
     <div class="p-2 mb-3 text-dark bg-opacity-10"><a href="#!">This is 10% opacity success background</a></div>
    </div>

##### Common Links

Link utilities are used to stylize your anchors to adjust their link opacity `(link-opacity-*),` hovered link Opacity `(link-opacity-*-hover),` underline opacity `(link-underline-opacity-*),` underline offset `(link-offset-*),` and more.

###### Link Opacity

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

###### Hovered Link Opacity

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

###### Underline Opacity

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

###### Underline Offset

Default link

Offset 1 link

Offset 2 link

Offset 3 link

    <div class="row g-3">
     <div class="col-sm-6 col-xxl-3">
       <div class="card-wrapper border rounded-3 h-100">
         <h6 class="sub-title fw-bold">Link Opacity</h6>
         <div class="link-opacity-wrapper">
           <p><a class="link-opacity-10" href="#!">Link opacity 10</a></p>
           <p><a class="link-opacity-25" href="#!">Link opacity 25</a></p>
           <p><a class="link-opacity-50" href="#!">Link opacity 50</a></p>
           <p><a class="link-opacity-75" href="#!">Link opacity 75</a></p>
           <p><a class="link-opacity-100" href="#!">Link opacity 100</a></p>
         </div>
       </div>
     </div>
     <div class="col-sm-6 col-xxl-3">
       <div class="card-wrapper border rounded-3 h-100">
         <h6 class="sub-title fw-bold"> Hovered Link Opacity</h6>
         <div class="link-opacity-wrapper">
           <p><a class="link-opacity-10-hover" href="#!">Link hover opacity 10</a></p>
           <p><a class="link-opacity-25-hover" href="#!">Link hover opacity 25</a></p>
           <p><a class="link-opacity-50-hover" href="#!">Link hover opacity 50</a></p>
           <p><a class="link-opacity-75-hover" href="#!">Link hover opacity 75</a></p>
           <p><a class="link-opacity-100-hover" href="#!">Link hover opacity 100</a></p>
         </div>
       </div>
     </div>
     <div class="col-sm-6 col-xxl-3">
       <div class="card-wrapper border rounded-3 h-100">
         <h6 class="sub-title fw-bold">Underline Opacity</h6>
         <div class="underline-opacity-wrapper">
           <p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#!">Underline opacity 0</a></p>
           <p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#!">Underline opacity 10</a></p>
           <p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#!">Underline opacity 25</a></p>
           <p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#!">Underline opacity 50</a></p>
           <p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#!">Underline opacity 75</a></p>
           <p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#!">Underline opacity 100</a></p>
         </div>
       </div>
     </div>
     <div class="col-sm-6 col-xxl-3">
       <div class="card-wrapper border rounded-3 h-100">
         <h6 class="sub-title fw-bold">Underline Offset</h6>
         <div class="underline-opacity-wrapper">
           <p><a href="#!">Default link</a></p>
           <p><a class="link-offset-1" href="#!">Offset 1 link</a></p>
           <p><a class="link-offset-2" href="#!">Offset 2 link</a></p>
           <p><a class="link-offset-3" href="#!">Offset 3 link</a></p>
         </div>
       </div>
     </div>
    </div>