HoverCard

Updated: October 9, 2025

The HoverCard component is a syntactic sugar for the Animation component with a handful of smart defaults to display additional information about an element when hovered or focused.

HoverCard

<HoverCard
  placement="top"
  trigger={<Avatar size="l" src="/images/avatar.jpg" tabIndex={0} />}
>
<Column padding="20" gap="20" radius="l" maxWidth={24} background="page" border="neutral-alpha-weak" href="https://lorant.one">
  <Row gap="20" fillWidth vertical="center">
    <Avatar size={3} src="/images/avatar.jpg" />
    <Column gap="4">
      <Text variant="heading-strong-m">Lorant One</Text>
      <Text variant="body-default-s" onBackground="neutral-weak">
        Design Engineer
      </Text>
    </Column>
  </Row>
  <Text variant="body-default-s" onBackground="neutral-weak">
    Published 100k+ lines of open-source code. Author of The Dopler Method, The Design Dividend, and Learn anything.
  </Text>
  <Row gap="8" wrap>
    <Tag>Design</Tag>
    <Tag>Frontend</Tag>
    <Tag>Writing</Tag>
  </Row>
</Column>
</HoverCard>

API reference

Prop	Type	Default
…and every AnimationProps prop	inherited	—

ComponentsHover

ComponentsIconButton

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club