Bookmark

PreviewCode

Copy

Example guide

A short description of the linked page, clamped to two lines.

https://example.com/guide

Usage

• Use Bookmark to preview an external web page with its title, description and thumbnail.
• Use a plain link in text when the preview would distract from the paragraph.
• Don’t use Bookmark for links between pages of the same workspace; use Page link instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { BlockContent, Bookmark } from '@krackedui/motion';

export function BookmarkExample() {
  return (
    <BlockContent>
      <Bookmark
        url="https://example.com/guide"
        title="Example guide"
        description="A short description of the linked page, clamped to two lines."
        thumbnail="/thumbnail.png"
      />
    </BlockContent>
  );
}

Examples

Minimal

Without a title the hostname is shown.

Placeholder

API Reference

Bookmark

Based on <div> and supports its props (except title). Adds:

Accessibility

• The card is a real link (target="_blank", rel="noopener noreferrer").
• Thumbnail and favicon are decorative (alt="").