Use attributes for behavior and CSS variables for presentation.

Choose a preset

<link-metadata-preview
  data-url="https://news.ycombinator.com"
  data-theme="dark">
</link-metadata-preview>

Supported themes are light, dark, and card.

Change the layout

<link-metadata-preview
  data-url="https://example.com/article"
  data-orientation="vertical"
  data-image-aspect-ratio="16/9">
</link-metadata-preview>

If data-orientation is omitted, the card uses a horizontal layout by default and switches to vertical on narrow screens.

Hide optional elements

<link-metadata-preview
  data-url="https://example.com"
  data-show-image="false"
  data-show-favicon="false"
  data-show-branding="false">
</link-metadata-preview>

Style one card

<link-metadata-preview
  data-url="https://news.ycombinator.com"
  style="
    --lm-max-width: 720px;
    --lm-title-color: #0f172a;
    --lm-border: 1px solid #0ea5e9;
    --lm-radius: 10px;
    --lm-shadow: 0 10px 20px -5px rgba(0,0,0,.18);
  ">
</link-metadata-preview>

Style every card

<style>
  link-metadata-preview {
    --lm-radius: 10px;
    --lm-hover-shadow: 0 8px 16px -4px rgba(0,0,0,.30);
    --lm-image-aspect-ratio: 4 / 3;
  }
</style>

CSS variables inherit into the component’s shadow root, so global design tokens work as expected.

Use a custom endpoint

<link-metadata-preview
  data-url="https://example.com"
  data-api-endpoint="https://metadata.example.com/preview?url=">
</link-metadata-preview>

The component appends the encoded data-url to data-api-endpoint.

For every attribute, CSS variable, and stable selector, see Component reference.