Context Card

A floating card on hover or focus. Use it for entity metadata that is heavier than a tooltip.

Sides

Default side is top. The card flips if it would collide with the viewport.

Top

Bottom

Left

Right


        
          1
          
          <ContextCardTrigger content="Production · Ready · 2m ago" side="top">
        

          2
          
            Top
        

          3
          
          </ContextCardTrigger>

Alignment

align pins the card to the start, center, or end of the trigger. Default is center.


        
          1
          
          <ContextCardTrigger
        

          2
          
            align="start"
        

          3
          
            side="bottom"
        

          4
          
            content="Start alignment sits on the leading edge."
        

          5
          
            as-child
        

          6
          
          >
        

          7
          
            <Button size="small">Start</Button>
        

          8
          
          </ContextCardTrigger>

Rich content

The content slot replaces the content string when the card needs a heading and metadata rows.

dpl_7f3a


        
          1
          
          <ContextCardTrigger side="top">
        

          2
          
            dpl_7f3a
        

          3
          
            <template #content>
        

          4
          
              <div class="space-y-1">
        

          5
          
                <p class="font-medium">Production</p>
        

          6
          
                <p class="text-[var(--ds-gray-900)]">Ready · 2m ago</p>
        

          7
          
              </div>
        

          8
          
            </template>
        

          9
          
          </ContextCardTrigger>

Custom element

render (or as) changes the trigger tag. Default is a div. as-child merges behavior onto the child instead.

acme-web


        
          1
          
          <ContextCardTrigger
        

          2
          
            render="a"
        

          3
          
            href="/"
        

          4
          
            side="top"
        

          5
          
            content="Project metadata for this workspace."
        

          6
          
          >
        

          7
          
            acme-web
        

          8
          
          </ContextCardTrigger>

Best practices

Context Card is for entity metadata on a name, avatar, or id in a dense row. One-line “why” is Tooltip. Long-form edit or navigation is a Drawer or a page.
Open delay is 150ms and close delay is 100ms on ContextCard. Keep that pause so a fast pointer sweep does not flash cards.
Lead with the entity name, then one identifying line, then two to four Label: value rows. Unknown values use an em dash, not N/A.
At most one primary action in the card. More than that is a Menu. Never put a destructive confirm in a hover surface — it can dismiss before commit.
Do not nest a Context Card inside a Tooltip or another card. The trigger keeps its own accessible name; the card is supplementary.
ContextCardTrigger is the usual API. ContextCard plus ContextCardContent are for composing your own trigger and delays.