# Link Card

## Example

```svelte
<script lang="ts">
	import { LinkCard } from '@foxui/all';
</script>

<LinkCard
	meta={{
		title: "hi, i'm florian",
		description:
			"hello world! this is my personal website. i'm florian, a full-stack software engineer based in berlin.",
		image: 'https://flo-bit.dev/og.jpg'
	}}
	href="https://www.flo-bit.dev"
/>
```

## Documentation

## Usage

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

## API Reference

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| meta | `{ title: string; description?: string; image?: string; imageAlt?: string; video?: string; videoType?: string }` | `-` | The metadata for the link preview. (required) |
| href | `string` | `-` | The URL the card links to. When provided, the card becomes clickable. |
| target | `string` | `'_blank'` | The link target attribute. |
| showMedia | `boolean` | `true` | Whether to show the image or video. |
| showTitle | `boolean` | `true` | Whether to show the title. |
| showDescription | `boolean` | `false` | Whether to show the description. |
| showDomain | `boolean` | `true` | Whether to show the domain name. |
| showGradient | `boolean` | `true` | Whether to show a gradient overlay on the media. |
| children | `Snippet` | `-` | Custom content to render inside the card. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |