# `PhiaUi.Components.LinkPreviewCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/link_preview_card.ex#L1)

Card component for displaying an Open Graph-style link preview with a
title, description, image, favicon, site name, and extracted domain.

Use this component to embed rich URL previews inside chat messages, comments,
shared content sections, or social-feed UIs.

## Variants

| `:variant`  | Layout      | Best for                                         |
|-------------|-------------|--------------------------------------------------|
| `:default`  | Vertical    | Featured link previews with image + full text    |
| `:compact`  | Horizontal  | Inline link list, sidebar references             |
| `:minimal`  | Plain text  | Dense feeds, comment sections, footnote links    |

## Domain extraction

The `domain` is automatically extracted from the `url` attribute via
`URI.parse/1`. If parsing fails, the raw `url` string is displayed instead.
You do not need to pass the domain explicitly.

## Data sourcing

Metadata for real-world uses comes from scraping OG tags server-side
(e.g. via [og_scraper](https://hex.pm/packages/og_scraper)) and passing the
values as assigns:

    case OgScraper.fetch(url) do
      {:ok, meta} ->
        assign(socket, link_preview: meta)
      _ ->
        assign(socket, link_preview: %{title: url, description: nil, image_src: nil})
    end

Then in the template:

    <.link_preview_card
      url={@link_preview.url}
      title={@link_preview.title}
      description={@link_preview.description}
      image_src={@link_preview.image_src}
      site_name={@link_preview.site_name}
    />

# `link_preview_card`

Renders a link preview card.

## Examples

    <.link_preview_card
      url="https://elixir-lang.org"
      title="Elixir Programming Language"
      description="A dynamic, functional language for building scalable applications."
      site_name="elixir-lang.org"
      image_src="/og/elixir.png"
    />

    <.link_preview_card
      url="https://hexdocs.pm/phoenix"
      title="Phoenix Framework"
      variant={:compact}
    />

## Attributes

* `url` (`:string`) (required) - The URL being previewed.
* `title` (`:string`) (required) - Link title text.
* `description` (`:string`) - Optional link description. Defaults to `nil`.
* `image_src` (`:string`) - Optional preview image URL. Defaults to `nil`.
* `favicon_src` (`:string`) - Optional favicon image URL. Defaults to `nil`.
* `site_name` (`:string`) - Optional site name label. Defaults to `nil`.
* `variant` (`:atom`) - Layout variant: :default (full), :compact (horizontal), :minimal (borderless). Defaults to `:default`. Must be one of `:default`, `:compact`, or `:minimal`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*