Link Card

Example

flo-bit.dev

		<LinkCard
	meta={{
		title: "hi, i'm florian",
		image: 'https://flo-bit.dev/og.jpg'
	}}
	href="https://www.flo-bit.dev"
/>

A rich preview card for URLs, displaying title, description, and media (image or video).

Property Type Description

meta required

object

The metadata for the link preview.

href

string

The URL the card links to. When provided, the card becomes clickable. Default: —

target

string

The link target attribute. Default: '_blank'

showMedia

boolean

Whether to show the image or video. Default: true

showTitle

boolean

Whether to show the title. Default: true

showDescription

boolean

Whether to show the description. Default: false

showDomain

boolean

Whether to show the domain name. Default: true

showGradient

boolean

Whether to show a gradient overlay on the media. Default: true

children

Snippet

Custom content to render inside the card. Default: —

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLDivElement

The underlying DOM element. Default: —

Property