Skip to main content Notion blocks  for Svelte
Beat Technology AS


This page is generated from a page in Notion database, and is intended to demonstrate the capability of the Bookmark block.

You can view this page in Notion to see that it corresponds well to what is displayed.

You can pick a stylesheet below to change how it renders.


Bookmarks are useful for providing a short summary of a linked website, or a nice preview.


GitHub: Let’s build from here

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

Carbon Design System

Carbon Design System

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

This bookmark has a caption.


Bookmarks will be missing one ingredient, namely the favicon that is rendered in front of the URL in Notion.

We are also using a somewhat home-made solution to pull in the details about the page, so the text displayed in the bookmark may be different from what Notion displays.

To allow supporting bookmarks, we retrieve the linked page on the backend, and use various queries in the DOM to find the title, a suitable image, and a description.

To find the title and image, we search for OpenGraph, then Twitter meta tags. Finally we fall back to the HTML title and first image of the body if nothing can be found. For the description, we search OpenGraph and Twitter tags first.


The bookmark is a link with a bookmark class. Inside, you will find an img tag, an h4 tag, and two paragraphs with classes description and url.