Focus Ring

<div class="flex flex-wrap gap-6 items-center">
  <a href="#" class="inline-flex focus-ring py-1 px-2 rounded-md no-underline border">Tab to me</a> <span class="inline-flex focus-ring hp-ring-on py-1 px-2 rounded-md border">Ring preview</span> 
</div>

<div class="flex flex-wrap gap-4">
  <span class="inline-flex focus-ring focus-ring-primary hp-ring-on py-1 px-2 rounded-md border">Primary</span><span class="inline-flex focus-ring focus-ring-secondary hp-ring-on py-1 px-2 rounded-md border">Secondary</span><span class="inline-flex focus-ring focus-ring-success hp-ring-on py-1 px-2 rounded-md border">Success</span><span class="inline-flex focus-ring focus-ring-danger hp-ring-on py-1 px-2 rounded-md border">Danger</span><span class="inline-flex focus-ring focus-ring-warning hp-ring-on py-1 px-2 rounded-md border">Warning</span><span class="inline-flex focus-ring focus-ring-info hp-ring-on py-1 px-2 rounded-md border">Info</span>
</div>

<a href="#" class="inline-flex focus-ring py-2 px-4 rounded-md no-underline border" style="--ui-focus-ring-color:rgba(var(--wt-accent-rgb),.5)">Accent ring on focus</a> <span class="inline-flex focus-ring hp-ring-on py-2 px-4 rounded-md border ms-4" style="--ui-focus-ring-color:rgba(var(--wt-accent-rgb),.5)">Preview</span>

<span class="inline-flex focus-ring hp-ring-on py-2 px-4 rounded-lg border font-semibold" style="--ui-focus-ring-x:6px;--ui-focus-ring-y:6px;--ui-focus-ring-blur:0;--ui-focus-ring-width:0">Offset ring</span>

<span class="inline-flex focus-ring hp-ring-on py-2 px-4 rounded-full border" style="--ui-focus-ring-blur:12px;--ui-focus-ring-width:2px">Glowing focus</span>

<div class="row g-3">
  <div class="col-md-4">
    <a href="#" class="card h-full no-underline focus-ring hp-ring-on">
    <div class="card-body">
      <span class="text-primary-ink text-xl"><i class="bi bi-trophy-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Live order tracking</h3>
      <p class="small text-muted mb-0">Every detail is handled by people who care about getting it right.</p>
    </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card h-full no-underline focus-ring">
    <div class="card-body">
      <span class="text-primary-ink text-xl"><i class="bi bi-compass-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Secure checkout</h3>
      <p class="small text-muted mb-0">Thousands of five-star reviews from customers who came back for more.</p>
    </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card h-full no-underline focus-ring">
    <div class="card-body">
      <span class="text-primary-ink text-xl"><i class="bi bi-trophy-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Loyalty rewards</h3>
      <p class="small text-muted mb-0">Every piece is made in small batches from materials we test ourselves.</p>
    </div>
    </a>
  </div>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">Five things we learned this year</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">A small guide to a calmer home</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">Five pieces for a capsule wardrobe</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">The small habits that make a big difference</a>
</div>

<div class="flex gap-1 p-1 border rounded-md" role="toolbar" aria-label="Actions">
  <button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Reply"><i class="bi bi-reply-fill" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Forward"><i class="bi bi-forward-fill" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Archive"><i class="bi bi-archive-fill" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-light btn-sm focus-ring focus-ring-danger" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button>
</div>

<div class="flex flex-wrap gap-2">
  <a href="#" class="badge rounded-full text-bg-light border no-underline focus-ring">Apparel</a><a href="#" class="badge rounded-full text-bg-light border no-underline focus-ring">Beauty</a><a href="#" class="badge rounded-full text-bg-light border no-underline focus-ring">Accessories</a><a href="#" class="badge rounded-full text-bg-light border no-underline focus-ring">Outdoor</a><a href="#" class="badge rounded-full text-bg-light border no-underline focus-ring">Home</a>
</div>

<a href="#" class="inline-block rounded-full focus-ring hp-ring-on" aria-label="View profile of Aria Sato"> <img src="../assets/img/avatar-9.svg" alt="" width="56" height="56" class="rounded-full block"> </a>

<div class="relative border rounded-md p-4" style="min-height:4rem">
  <a href="#" class="sr-only focus:not-sr-only absolute top-0 start-0 m-2 btn btn-sm btn-primary focus-ring">Skip to main content</a> 
  <p class="small text-muted mb-0">Press Tab inside this example to reveal the skip link.</p>
</div>

<nav aria-label="Results pages">
  <div class="flex gap-2">
    <a href="#" class="inline-flex justify-center rounded-md border no-underline focus-ring py-1" style="width:2.25rem">1</a><a href="#" class="inline-flex justify-center rounded-md border no-underline focus-ring py-1 text-bg-primary" aria-current="page" style="width:2.25rem">2</a><a href="#" class="inline-flex justify-center rounded-md border no-underline focus-ring py-1" style="width:2.25rem">3</a><a href="#" class="inline-flex justify-center rounded-md border no-underline focus-ring py-1" style="width:2.25rem">4</a><a href="#" class="inline-flex justify-center rounded-md border no-underline focus-ring py-1" style="width:2.25rem">5</a>
  </div>
</nav>

<nav aria-label="Main">
  <ul class="nav gap-1">
    <li class="nav-item"><a class="nav-link rounded-md focus-ring focus-ring-secondary" href="#">Overview</a></li>
    <li class="nav-item"><a class="nav-link rounded-md focus-ring focus-ring-secondary" href="#">Pricing</a></li>
    <li class="nav-item"><a class="nav-link rounded-md focus-ring focus-ring-secondary" href="#">Customers</a></li>
    <li class="nav-item"><a class="nav-link rounded-md focus-ring focus-ring-secondary" href="#">Support</a></li>
  </ul>
</nav>

<div class="flex gap-2">
  <a href="#" class="inline-block rounded-md focus-ring hp-ring-on"><img src="https://images.unsplash.com/photo-1573612664822-d7d347da7b80?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo one" width="96" height="96" class="rounded-md block object-cover"></a> <a href="#" class="inline-block rounded-md focus-ring"><img src="https://images.unsplash.com/photo-1443884590026-2e4d21aee71c?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo two" width="96" height="96" class="rounded-md block object-cover"></a> 
</div>

<table class="table table-sm mb-0">
  <thead>
    <tr>
      <th scope="col">Member</th>
      <th scope="col" class="text-end">Profile</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chloe Haddad</td>
      <td class="text-end"><a href="#" class="rounded-md px-1 focus-ring">View</a></td>
    </tr>
    <tr>
      <td>Ethan Silva</td>
      <td class="text-end"><a href="#" class="rounded-md px-1 focus-ring">View</a></td>
    </tr>
    <tr>
      <td>Tariq Delgado</td>
      <td class="text-end"><a href="#" class="rounded-md px-1 focus-ring">View</a></td>
    </tr>
  </tbody>
</table>

<span class="inline-flex focus-ring focus-ring-warning hp-ring-on py-2 px-4 rounded-md border" style="--ui-focus-ring-width:.4rem">Thick warning ring</span>

<div class="row g-2">
  <div class="col-6 col-md-3">
    <a href="#" class="block text-center border rounded-lg p-4 no-underline focus-ring"><span class="block text-2xl"><i class="bi bi-person-fill" aria-hidden="true"></i></span>Profile</a>
  </div>
  <div class="col-6 col-md-3">
    <a href="#" class="block text-center border rounded-lg p-4 no-underline focus-ring"><span class="block text-2xl"><i class="bi bi-shield-lock-fill" aria-hidden="true"></i></span>Security</a>
  </div>
  <div class="col-6 col-md-3">
    <a href="#" class="block text-center border rounded-lg p-4 no-underline focus-ring"><span class="block text-2xl"><i class="bi bi-bell-fill" aria-hidden="true"></i></span>Alerts</a>
  </div>
  <div class="col-6 col-md-3">
    <a href="#" class="block text-center border rounded-lg p-4 no-underline focus-ring"><span class="block text-2xl"><i class="bi bi-credit-card-fill" aria-hidden="true"></i></span>Billing</a>
  </div>
</div>

<a href="#" class="inline-flex items-center gap-2 border rounded-full px-4 py-2 no-underline text-muted focus-ring hp-ring-on" style="--ui-focus-ring-color:rgba(var(--wt-primary-rgb),.35)"><i class="bi bi-search" aria-hidden="true"></i> Search Xenoara Pro</a>

<div class="text-bg-dark rounded-md p-4 flex gap-4">
  <a href="#" class="link-light rounded-md px-2 focus-ring" style="--ui-focus-ring-color:rgba(255,255,255,.5)">Docs</a> <span class="rounded-md px-2 focus-ring hp-ring-on" style="--ui-focus-ring-color:rgba(255,255,255,.5)">Preview</span> 
</div>

<div class="flex flex-wrap gap-6">
  <a href="#">Default browser outline</a> <a href="#" class="focus-ring rounded-md px-1">Bootstrap focus ring</a> 
</div>