PhiaUi.Components.LinkPreviewCard (phia_ui v0.1.17)

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) 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}
/>

Summary

Functions

link_preview_card(assigns)

Renders a link preview card.

Functions

link_preview_card(assigns)

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.