Column & ColumnList

There’s not much point in documenting these components separately. Needless to say, Columns live inside ColumnLists. As defined by Notion, every column list is effectively just a single row of n columns.

Both are intended to be layout-only, though you’re certainly welcome to add backgrounds and outlines and gradients, etc. to your heart’s content. That’s the whole point of extracting your content from Notion! 😉

1. Notion original

In case you’re curious, the marks over the images are Balinese digits: 1 2 3. Gotta love that Unicode!

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
  "object": "block",
  …
  "type": "column_list",
  "column_list": {},
  "blocks": [
    {
      "object": "block",
      …
      "type": "column",
      "column": {},
      "blocks": [
        {
          …"heading_1": {…"plain_text": "᭑",…}
        },
        {
          …"image": {…}
        }
      ]
    },
    {
      "object": "block",
      …
      "column": {},
      "blocks": [
        {
          …"heading_1": {…"plain_text": "᭒",…}
        },
        {
          …"image": {…}
        }
      ]
    },
    {
      "object": "block",
      …
      "column": {},
      "blocks": [
        { …"heading_1": {…"plain_text": "᭓",…}
        },
        {
          …"image": {…}
        }
      ]
    }
  ]
}
  javascript

3. Svelte output

Partial output of src/routes/[slug].svelte

<ColumnList cols={3}>
  <Column>
    <Header level="1">᭑</Header>
    <Image url="/assets/components/columns/a8410bc7-07a4-4648-8516-bde1bcbffe1b.heic" />
  </Column>
  <Column>
    <Header level="1">᭒</Header>
    <Image url="/assets/components/columns/8e423534-3965-453e-a56a-ea041fcc2cce.heic" />
  </Column>
  <Column>
    <Header level="1">᭓</Header>
    <Image url="/assets/components/columns/dcd84270-50b5-4033-83dc-83dc41e7c5b8.jpg" />
  </Column>
</ColumnList>
  html