Hover Card

Hover Card component for the Simpson Strong-Tie design system.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation


npm install @strongtie/design-system

import { HoverCard } from "@strongtie/design-system/hover-card"

Components

This module exports the following components:

HoverCard
HoverCardTrigger
HoverCardContent

Props

All components accept standard HTML attributes and React props.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

hover-card-content

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Field Icon

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute

Hover Card

Hover Card component for the Simpson Strong-Tie design system.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation


npm install @strongtie/design-system

import { HoverCard } from "@strongtie/design-system/hover-card"

Components

This module exports the following components:

HoverCard
HoverCardTrigger
HoverCardContent

Props

All components accept standard HTML attributes and React props.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

hover-card-content

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Field Icon

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute