Hover Card

A card that appears when hovering over a trigger element, showing additional information.

Default

Hover over the link to see a preview card with user information.

html
@nextjs

@nextjs

The React Framework – created and maintained by @vercel.

120 Following 48.2K Followers 
<div class="uc-relative uc-group">
  <a href="#" class="uc-text-accents-blue uc-underline">@nextjs</a>
  <div class="uc-absolute uc-top-full uc-mt-2 uc-w-72 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-p-4 uc-shadow-lg uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity">
    <p class="uc-text-sm uc-font-semibold">@nextjs</p>
    <p class="uc-text-sm uc-text-fg-disabled">Description...</p>
  </div>
</div>

User Profile Card

Hover over a user avatar to see their profile details and follow action.

html
SC

Sarah Connor

@sarahconnor

Product designer and front-end developer. Passionate about design systems and accessible interfaces.

<div class="uc-relative uc-group">
  <button class="uc-flex uc-items-center uc-gap-2">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-neutrals-muted uc-flex uc-items-center uc-justify-center">
      <span class="uc-text-xs uc-font-medium">SC</span>
    </div>
    <span class="uc-text-sm uc-font-medium">Sarah Connor</span>
  </button>
  <div class="uc-absolute uc-top-full uc-mt-2 uc-w-72 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-p-4 uc-shadow-lg uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity">
    <div class="uc-flex uc-items-center uc-gap-3 uc-mb-3">
      <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-neutrals-muted">...</div>
      <div>
        <p class="uc-text-sm uc-font-semibold">Sarah Connor</p>
        <p class="uc-text-xs uc-text-fg-disabled">@sarahconnor</p>
      </div>
    </div>
    <p class="uc-text-sm uc-text-fg-disabled uc-mb-4">Product designer...</p>
    <button class="uc-w-full">Follow</button>
  </div>
</div>

Product Preview

Hover over a product name to see a quick preview with image, price, and rating.

html
Wireless Headphones Pro

Wireless Headphones Pro

$149.99
4.0 
<div class="uc-relative uc-group">
  <a href="#" class="uc-text-sm uc-font-medium uc-text-accents-blue uc-underline">Wireless Headphones Pro</a>
  <div class="uc-absolute uc-top-full uc-mt-2 uc-w-72 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-p-4 uc-shadow-lg uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity">
    <div class="uc-bg-neutrals-muted uc-h-32 uc-rounded-lg uc-mb-3">...</div>
    <p class="uc-text-sm uc-font-semibold uc-mb-1">Wireless Headphones Pro</p>
    <div class="uc-flex uc-items-center uc-justify-between uc-mb-3">
      <span class="uc-text-sm uc-font-bold">$149.99</span>
      <div class="uc-flex uc-items-center uc-gap-1">
        <span>★★★★☆</span>
        <span class="uc-text-xs uc-text-fg-disabled">4.0</span>
      </div>
    </div>
    <button class="uc-w-full">Add to Cart</button>
  </div>
</div>

With Arrow

Hover card with a CSS arrow pointing to the trigger element.

html
@astrojs

@astrojs

Build faster websites

Astro is a web framework for building fast, content-focused websites. Loved by developers worldwide.

85 Following 32.1K Followers 
<div class="uc-relative uc-group">
  <a href="#" class="uc-text-sm uc-font-medium uc-text-accents-blue uc-underline">@astrojs</a>
  <div class="uc-absolute uc-top-full uc-left-4 uc-mt-3 uc-w-72 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-p-4 uc-shadow-lg uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity">
    <!-- Arrow border -->
    <div class="uc-absolute uc-bottom-full uc-left-6 uc-border-8 uc-border-transparent uc-border-b-border-default"></div>
    <!-- Arrow fill -->
    <div class="uc-absolute uc-bottom-full uc-left-6 uc-border-8 uc-border-transparent uc-border-b-neutrals-surface"></div>
    <div class="uc-flex uc-items-center uc-gap-3 uc-mb-3">
      <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted">...</div>
      <div>
        <p class="uc-text-sm uc-font-semibold">@astrojs</p>
        <p class="uc-text-xs uc-text-fg-disabled">Build faster websites</p>
      </div>
    </div>
    <p class="uc-text-sm uc-text-fg-disabled uc-mb-3">Astro is a web framework...</p>
  </div>
</div>

API Reference

All CSS classes available for the Hover Card component.

Class Type Description
uc-relative uc-group Layout Container with relative positioning and group hover trigger
uc-absolute uc-top-full Position Positions card below the trigger element
uc-mt-2 Spacing Gap between trigger and hover card
uc-w-72 Size Fixed card width (18rem)
uc-rounded-lg Shape Rounded corners for the card
uc-border uc-border-border-default Border Default border around the card
uc-bg-neutrals-surface Color Surface background for the card
uc-shadow-lg Elevation Large shadow for floating card effect
uc-opacity-0 uc-group-hover:opacity-100 Animation Show card on group hover
uc-transition-opacity Animation Smooth fade in/out transition
uc-pointer-events-none uc-group-hover:pointer-events-auto Interactive Enable interaction only when visible
uc-text-accents-blue Color Blue accent for trigger links
uc-underline uc-underline-offset-4 Typography Underlined trigger link style
uc-bg-neutrals-muted Color Muted background for avatar/image placeholders
uc-text-fg-disabled Color Muted text for descriptions and metadata
uc-border-b-border-default Border Arrow border color (with-arrow variant)
uc-border-b-neutrals-surface Color Arrow fill color (with-arrow variant)

Accessibility

Keyboard and screen reader support.

Feature Details
Trigger Hover card content should also be accessible via focus, not just hover
Keyboard Card appears on focus of trigger, dismissed on Escape or blur
Role Use role="tooltip" or role="dialog" depending on card complexity
Delay Include open/close delay to prevent accidental triggers