# Hover card: Inline link

> Use `render` to make the trigger any link, including one inside a sentence. When a link wraps onto two lines, the card anchors to the line you hovered.

Example: https://hextaui.com/docs/hover-card/examples/inline
Component docs: https://hextaui.com/docs/hover-card.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/hover-card-inline.json
```

This adds `components/examples/hover-card/inline.tsx` with the Hover card component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/hover-card/inline.tsx"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export function HoverCardInline() {
  return (
    <p className="max-w-sm text-sm text-muted-foreground">
      Built on{" "}
      <HoverCard>
        <HoverCardTrigger
          href="https://base-ui.com"
          render={
            <a className="font-medium text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground" />
          }
        >
          Base UI
        </HoverCardTrigger>
        <HoverCardContent className="w-60">
          Unstyled, accessible React primitives from the creators of Radix,
          Floating UI and Material UI.
        </HoverCardContent>
      </HoverCard>{" "}
      primitives, styled with Tailwind CSS and theme tokens, and ready to copy
      into your project.
    </p>
  )
}
```

## Props in this example

### HoverCardTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<a>` | Render your own link, such as <Button variant="link" /> or a router link. |

## More Hover card examples

- [Side](https://hextaui.com/docs/hover-card/examples/sides.md)
- [Delay](https://hextaui.com/docs/hover-card/examples/delay.md)
- [Interactive content](https://hextaui.com/docs/hover-card/examples/rich-content.md)
- [Shared card](https://hextaui.com/docs/hover-card/examples/detached.md)
- [Arrow](https://hextaui.com/docs/hover-card/examples/arrow.md)
- [Loading content](https://hextaui.com/docs/hover-card/examples/async.md)
- [Controlled](https://hextaui.com/docs/hover-card/examples/controlled.md)
- [Long content](https://hextaui.com/docs/hover-card/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/hover-card/examples/rtl.md)