Previewbox Link

Our previewbox-link component provides a simple link preview, just like the ones you see in articles. It's great for placing in the middle of an article's text or on any website to show a preview of another URL.

Demo

If you like to play around with the component, you can check out this CodePen demo.

To use the <previewbox-link> component, you can either set the href attribute to fetch link preview data automatically or manually set the attributes for a custom preview.

Automatically Fetched Data

<previewbox-link href="https://web-highlights.com"></previewbox-link>

Learn more about the automatic data fetching in our hosting guide.

Manually Set Data

<previewbox-link
  url="https://example.org"
  title="This Title Was Manually Passed"
  description="This description was manually passed. The data was not fetched from the URL because no href was provided."
  imageUrl="https://picsum.photos/1200/630"
  imageAlt="Lorem Ipsum Image"
  author="Jon Doe"
></previewbox-link>

You can find all available properties in the API documentation.

CSS Customization

The <previewbox-link> component supports CSS customization through custom properties. You can define these properties in your stylesheet or directly in the HTML using the style attribute. Here's an example:

<previewbox-link
  style="--pb-background-color: #595959; --pb-text-color: white; --pb-text-color-light: #ffffff;"
  href="https://web-highlights.com/about"
></previewbox-link>

Learn more about this in our CSS Variables documentation.

CSS Custom Properties

The <previewbox-link> component supports the following CSS custom properties for styling:

Property Name	Description	Default Value
--pb-background-color	Background color of the link card	#ffffff
--pb-dark-background-color	Background color in dark mode	#121212
--pb-text-color	Text color of the link card	#000000
--pb-dark-text-color	Text color in dark mode	#e0e0e0
--pb-text-color-light	Color of the metadata text like description and author	rgba(0, 0, 0, 0.7)
--pb-dark-text-color-light	Metadata text color in dark mode	rgba(255, 255, 255, 0.8)
--pb-border-color	Border color of the link card	rgb(124 139 154 / 25%)
--pb-dark-border-color	Border color in dark mode	#8080803a
--pb-skeleton-color	Color of the loading skeleton	rgb(229, 231, 235)
--pb-dark-skeleton-color	Skeleton color in dark mode	rgb(55, 65, 81)
--pb-fallback-img-color	Color of the fallback image	hsl(220, 13%, 80%)
--pb-dark-fallback-img-color	Fallback image color in dark mode	hsl(220, 13%, 40%)
--pb-fallback-img-background	Background of the fallback image	rgb(229, 231, 235)
--pb-dark-fallback-img-background	Fallback image background in dark mode	rgb(55, 65, 81)
--pb-favicon-size	Size of the favicon image	20px

These properties allow you to customize the appearance of the link preview to match your website's design.