Norbielink has no hover card — no rich panel of content opens on hover anywhere in the product. What it does have is hover reveal: a card or row keeps its actions hidden until the pointer is over it, so a dense screen stays quiet. That pattern is documented here. For a short label on hover, see Tooltip.
Card action
An Edit button pinned to the card’s top-right corner, at zero opacity until the card is hovered. The card itself is the hover target, not the button — move the pointer anywhere over it.
Jane Smith
Locked action
When the action is not permitted the button still appears on hover, disabled, and carries a second hover target of its own: hovering the button reveals a dark bubble explaining why. Two nested hover scopes, which is as close as the product gets to a hover card.
Jane Smith
Row swap
On a list row the reveal is a swap: the trailing status check fades out
as the remove button fades in, in the same place. The row never changes width, so nothing shifts. This list
lives on a tinted #F5F6F8 rail, which is what lets both the #F0F1F4 hover and the
white selected row read — on a white surface neither would.
Specs
| Part | Value |
|---|---|
| Mechanism | opacity 0 → 1 on the container’s hover, never display — the element keeps its box so nothing reflows |
| Card action | position:absolute · top 16px · right 16px · height 36px · padding 0 12px · radius 8px · gap 6px · 12px / 600 |
| Card action fill | #fff on 1px #E5E7EB; its own hover is #F9FAFB |
| Locked action | Same box · opacity .75 · cursor:not-allowed · text #6B7280 · sits at right 56px to leave room for the card’s own icon |
| Explanation bubble | top calc(100% + 6px) · right 0 · #111827 on white text · 11px · padding 6px 10px · radius 8px · shadow 0 6px 20px rgba(15,23,42,.15) · white-space:nowrap · pointer-events:none |
| Row | padding 8px 10px · radius 8px · 1px transparent · 12.5px / 500 · margin-bottom 2px |
| Row rail | #F5F6F8 · hover #F0F1F4 — both from the record editor, not the generic grays |
| Row selected | #fff on 1px #E5E7EB · shadow 0 1px 2px rgba(15,23,42,.04) · text #A614C3 at 600 |
| Row swap | Check opacity 1 → 0 and remove button 0 → 1 on the same row hover · button absolute at right 6px, vertically centred · padding 4px |
| Icons | 14×14 in actions, 20×20 in the card’s corner badge, check at stroke-width 3 |
| Hover reveal is for a secondary action on a repeated element. A primary action is never hidden behind hover — it sits in the toolbar above the list. |
| Because reveal is opacity-only, the hidden button still occupies its box and is still focusable. It is a visual affordance, not a gate. |
| None of this works on touch. Every revealed action has a non-hover route to it — opening the record, or the row’s context menu. |
| The locked bubble is the product’s only nested hover scope: the card reveals the button, then the button reveals the bubble. |