Links & Interaction

 <p className="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
 <p className="user-select-auto">This paragraph has default select behavior.</p>
 <p className="user-select-none mb-0">This paragraph will not be selectable when clicked by the user.</p>

<p><Link href="#!" className="pe-none text-primary fw-medium text-decoration-underline" tabIndex={-1} aria-disabled="true">This link</Link> can not be clicked.</p>
<p><Link href="#!" className="pe-auto text-primary fw-medium text-decoration-underline">This link</Link> can be clicked (this is default behavior).</p>
<p className="pe-none mb-0"><Link href="#!" tabIndex={-1} className="text-primary fw-medium text-decoration-underline" aria-disabled="true">This link</Link> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <Link href="#!" className="pe-auto">this link</Link> has a <code>pe-auto</code> class and can be clicked.</p>

  <p><Link className="link-opacity-10" href="#!">Link opacity 10</Link></p>
  <p><Link className="link-opacity-25" href="#!">Link opacity 25</Link></p>
  <p><Link className="link-opacity-50" href="#!">Link opacity 50</Link></p>
  <p><Link className="link-opacity-75" href="#!">Link opacity 75</Link></p>
  <p className="mb-0"><Link className="link-opacity-100" href="#!">Link opacity 100</Link></p>

  <Link className="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-decoration-underline" href="#!">
  Underline opacity 0
</Link>

 <p><Link href="#!" className="link-underline-primary text-decoration-underline">Primary underline</Link></p>
 <p><Link href="#!" className="link-underline-secondary text-decoration-underline">Secondary underline</Link></p>
 <p><Link href="#!" className="link-underline-success text-decoration-underline">Success underline</Link></p>
 <p><Link href="#!" className="link-underline-danger text-decoration-underline">Danger underline</Link></p>
 <p><Link href="#!" className="link-underline-warning text-decoration-underline">Warning underline</Link></p>
 <p><Link href="#!" className="link-underline-info text-decoration-underline">Info underline</Link></p>
 <p><Link href="#!" className="link-underline-light text-decoration-underline">Light underline</Link></p>
 <p className="mb-0"><Link href="#!" className="link-underline-dark text-decoration-underline">Dark underline</Link></p>

   <p><Link href="#!" className="text-decoration-underline">Default link</Link></p>
   <p><Link className="link-offset-1 text-decoration-underline" href="#!">Offset 1 link</Link></p>
   <p><Link className="link-offset-2 text-decoration-underline" href="#!">Offset 2 link</Link></p>
   <p className="mb-0"><Link className="link-offset-3 text-decoration-underline" href="#!">Offset 3 link</Link></p>

 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-0" href="#!">Underline opacity 0</Link></p>
 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-10" href="#!">Underline opacity 10</Link></p>
 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-25" href="#!">Underline opacity 25</Link></p>
 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-50" href="#!">Underline opacity 50</Link></p>
 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-75" href="#!">Underline opacity 75</Link></p>
 <p><Link className="text-decoration-underline link-offset-2 link-underline link-underline-opacity-100" href="#!">Underline opacity 100</Link></p>

<p><Link className="link-opacity-10-hover" href="#!">Link hover opacity 10</Link></p>
<p><Link className="link-opacity-25-hover" href="#!">Link hover opacity 25</Link></p>
<p><Link className="link-opacity-50-hover" href="#!">Link hover opacity 50</Link></p>
<p><Link className="link-opacity-75-hover" href="#!">Link hover opacity 75</Link></p>
<p className="mb-0"><Link className="link-opacity-100-hover" href="#!">Link hover opacity 100</Link></p>

 <p><Link href="#!" className="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Primary link</Link></p>
 <p><Link href="#!" className="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Secondary link</Link></p>
 <p><Link href="#!" className="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Success link</Link></p>
 <p><Link href="#!" className="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Danger link</Link></p>
 <p><Link href="#!" className="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Warning link</Link></p>
 <p><Link href="#!" className="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Info link</Link></p>
 <p><Link href="#!" className="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Light link</Link></p>
 <p><Link href="#!" className="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover text-decoration-underline">Dark link</Link></p>
 <p className="mb-0"><Link href="#!" className="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover text-decoration-underline ">Emphasis link</Link></p>