← All Notes

Notion Kitchen Sink

This style-guide is a direct representation of the corresponding Notion page. Here I add all the possible "blocks" that Notion offers and experiment with rendering them as HTML on a website.

Heading Two

Heading Three, with an 👨‍🚀 emoji

A paragraph of text. This style-guide is a direct representation of the corresponding Notion page. Here I can add all the possible "blocks" 🚒 that Notion offers and see how best to render them as HTML on a website.

  1. Ordered list item one 🚀
  1. Ordered list item two — but it's a much longer one. Needed so I can see how the text wraps into multiple lines inside a list
  1. Ordered list item three
    1. Nested list item, uses abcd numbering.
    2. a nested quote block
// here's a code block with some random javascript

let me = {
	name: "clearlysid",
	age: 21,
	alive: true
}

function happyBirthday(person) {
	person.age = person.age + 1
	return person
}

happyBirthday(me)
To-do Item One
To-do Item Two, checked off!
To-do Item Three
A toggle block

stuff inside the toggle block. This currently doesn't work since the API stopped sending children block data inside of a toggle. Not sure why the change was made, but I remember it working perfectly before.


An unsplash image with a sky and a bridge, this image is taller than it is wide.
An unsplash image with a sky and a bridge, this image is taller than it is wide.
Here's some quote by a famous personality
A callout with a bulb emoji
sorry, a notion update broke access to this video file

Lorem ipsum dolor set amet. checking to see if this renders in columns correctly 🐒

  1. a list item
  1. another list item

Thanks for reading!