Nested Blocks

General Discussion

Notion allows nesting of most, if not all, of its interchangeable block types. While there are probably myriad subtle design details that the Notion team have considered when rendering nested blocks, the most obvious visual feature of these suckers is that they’re indented…

…like this.

This, and the one above it. are both sub-blocks of the main paragraph, and, as such, you’ll probably want to indent sub-blocks in your own code!

How to Indent blocks

Indenting is handled by the IndentGroup component, which is wrapped around every group of sub-blocks…hence the name.

The most basic version of this component might look something like this:

<div><slot /></div>

<style>
  div {
    padding-left: 1.5rem;
  }
</style>
  html

↑ [svelte-root]/src/lib/notion2svelte/IndentGroup.svelte

This simple implementation is literally all you need to nest All the Things™!

🏠 Browse the docs ⚘

High-level Discussion

Where notion2svelte Fits

Configuring your .env

Turn-intoable Block Components

Paragraph (aka “Text”)

Toggle Headings (not yet implemented)

Layout-only Components

IndentGroup

Column & ColumnList

Page-level Components

Title (aka Name)

Cover (Image & Icon)

Annotation Components

bold → <strong>

italic → <em>

~~strikethrough~~ → <s>

Other Components