Hover Card

import { Avatar, AvatarFallback, HoverCard, HoverCardBody, HoverCardContent, HoverCardDescription, HoverCardDetails, HoverCardMeta, HoverCardTitle, HoverCardTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">@pelatform</HoverCardTrigger>
      <HoverCardContent>
        <HoverCardBody>
          <Avatar>
            <AvatarFallback>PL</AvatarFallback>
          </Avatar>
          <HoverCardDetails>
            <HoverCardTitle>Pelatform</HoverCardTitle>
            <HoverCardDescription>CSS and JavaScript components for plain HTML.</HoverCardDescription>
            <HoverCardMeta>
              <Icon name="calendar" />
              <span>Joined October 2026</span>
            </HoverCardMeta>
          </HoverCardDetails>
        </HoverCardBody>
      </HoverCardContent>
    </HoverCard>
  );
}

import { Avatar, AvatarFallback, HoverCard, HoverCardBody, HoverCardContent, HoverCardDescription, HoverCardDetails, HoverCardMeta, HoverCardTitle, HoverCardTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">@pelatform</HoverCardTrigger>
      <HoverCardContent>
        <HoverCardBody>
          <Avatar>
            <AvatarFallback>PL</AvatarFallback>
          </Avatar>
          <HoverCardDetails>
            <HoverCardTitle>Pelatform</HoverCardTitle>
            <HoverCardDescription>CSS and JavaScript components for plain HTML.</HoverCardDescription>
            <HoverCardMeta>
              <Icon name="calendar" />
              <span>Joined October 2026</span>
            </HoverCardMeta>
          </HoverCardDetails>
        </HoverCardBody>
      </HoverCardContent>
    </HoverCard>
  );
}

import { HoverCard, HoverCardBody, HoverCardContent, HoverCardDescription, HoverCardDetails, HoverCardMedia, HoverCardMeta, HoverCardTitle, HoverCardTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">Design guide</HoverCardTrigger>
      <HoverCardContent>
        <HoverCardBody>
          <HoverCardMedia>
            <Icon name="file-text" className="size-5" />
          </HoverCardMedia>
          <HoverCardDetails>
            <HoverCardTitle>Design guide</HoverCardTitle>
            <HoverCardDescription>Tokens, controls and patterns.</HoverCardDescription>
            <HoverCardMeta>
              <span>12 pages · PDF</span>
            </HoverCardMeta>
          </HoverCardDetails>
        </HoverCardBody>
      </HoverCardContent>
    </HoverCard>
  );
}

import { HoverCard, HoverCardBody, HoverCardContent, HoverCardDescription, HoverCardDetails, HoverCardMedia, HoverCardMeta, HoverCardTitle, HoverCardTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">Design guide</HoverCardTrigger>
      <HoverCardContent>
        <HoverCardBody>
          <HoverCardMedia>
            <Icon name="file-text" className="plf:size-5" />
          </HoverCardMedia>
          <HoverCardDetails>
            <HoverCardTitle>Design guide</HoverCardTitle>
            <HoverCardDescription>Tokens, controls and patterns.</HoverCardDescription>
            <HoverCardMeta>
              <span>12 pages · PDF</span>
            </HoverCardMeta>
          </HoverCardDetails>
        </HoverCardBody>
      </HoverCardContent>
    </HoverCard>
  );
}

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@pelatform/react';

export function Example() {
  return (
    <>
      <HoverCard placement="top">
        <HoverCardTrigger href="#">Top</HoverCardTrigger>
        <HoverCardContent>Opens on top.</HoverCardContent>
      </HoverCard>
      <HoverCard placement="right">
        <HoverCardTrigger href="#">Right</HoverCardTrigger>
        <HoverCardContent>Opens on the right.</HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger href="#">Bottom</HoverCardTrigger>
        <HoverCardContent>Opens at the bottom.</HoverCardContent>
      </HoverCard>
      <HoverCard placement="left">
        <HoverCardTrigger href="#">Left</HoverCardTrigger>
        <HoverCardContent>Opens on the left.</HoverCardContent>
      </HoverCard>
      <HoverCard align="start">
        <HoverCardTrigger href="#">Bottom start</HoverCardTrigger>
        <HoverCardContent>Aligned to the start of the link.</HoverCardContent>
      </HoverCard>
      <HoverCard align="end">
        <HoverCardTrigger href="#">Bottom end</HoverCardTrigger>
        <HoverCardContent>Aligned to the end of the link.</HoverCardContent>
      </HoverCard>
    </>
  );
}

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <HoverCard placement="top">
        <HoverCardTrigger href="#">Top</HoverCardTrigger>
        <HoverCardContent>Opens on top.</HoverCardContent>
      </HoverCard>
      <HoverCard placement="right">
        <HoverCardTrigger href="#">Right</HoverCardTrigger>
        <HoverCardContent>Opens on the right.</HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger href="#">Bottom</HoverCardTrigger>
        <HoverCardContent>Opens at the bottom.</HoverCardContent>
      </HoverCard>
      <HoverCard placement="left">
        <HoverCardTrigger href="#">Left</HoverCardTrigger>
        <HoverCardContent>Opens on the left.</HoverCardContent>
      </HoverCard>
      <HoverCard align="start">
        <HoverCardTrigger href="#">Bottom start</HoverCardTrigger>
        <HoverCardContent>Aligned to the start of the link.</HoverCardContent>
      </HoverCard>
      <HoverCard align="end">
        <HoverCardTrigger href="#">Bottom end</HoverCardTrigger>
        <HoverCardContent>Aligned to the end of the link.</HoverCardContent>
      </HoverCard>
    </>
  );
}