Hover Card

For sighted users to preview content available behind a link. Triggered when the user hovers over an element.

Default

A basic hover card showing project information when hovering over a link.

Rich Profile Preview

A more complex layout with avatars, action buttons, and social stats.

Developed by

Contextual Info

Use hover cards to provide additional context or policy details without cluttering the UI.

Transaction Fee:$0.00

API Reference

Brain API

The hover card logic is powered by the BrnHoverCard directives.

DirectiveSelectorInputs / Outputs
BrnHoverCardbrn-hover-card
  • openDelay: number (Default: 700)
  • closeDelay: number (Default: 300)
BrnHoverCardTrigger[brnHoverCardTrigger]Element that triggers the hover card.

Helm API

ComponentSelectorDescription
HlmHoverCardContenthlm-hover-card-contentStyled container for the card's content.

Installation & Usage

Installation

Imports

Basic Skeleton