Notion-on-next Supported Blocks + Examples
Notion-on-next Supported Blocks + Examples
11/26/2022

Call out

This is a call out. Use it to highlight important information!

Headings

Heading 1

Heading 2

Headings 3


Toggles

Toggle Heading 1

With body text inside

Toggle Heading 2

With body text inside

Toggle Heading 3

With body text inside

A normal toggle

With stuff inside!


Lists

Bulleted List

  • Football
    • NFL
  • Baseball
    • MLB
  • Basketball
    • NBA

Numbered List

  1. You take the dinglepop, and you smooth it out with a bunch of schleem.
    1. The schleem is then repurposed for later batches.
  1. Then you take the dinglebop and push it through the grumbo, where the fleeb is rubbed against it.
    1. It's important that the fleeb is rubbed, because the fleeb has all of the fleeb juice.
  1. Then a Shlami shows up and he rubs it, and spits on it.

Checklist

Apples
Oranges
Bananas


Rich Text

Here’s a paragraph of rich text. This text is highlighted purple. This text is colored blue. Oh, a link to a page? That’s so bold! Right? Nevermind, let’s underline it instead. Here is a code snippet.


Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus enim id ligula rutrum fermentum. Cras enim felis, placerat aliquet quam vitae, rhoncus faucibus ante. Fusce vitae turpis sed odio luctus tempor. Ut tristique maximus porta. Maecenas congue, enim nec feugiat euismod, mauris nisl porttitor lacus, vel convallis ipsum nulla ac enim. Morbi facilisis metus et erat imperdiet scelerisque. Nam vehicula tempus dui sed vulputate. Maecenas efficitur elit at porttitor fermentum. Proin eu sagittis diam. Vivamus ultricies eu neque a interdum.


Code

// Next 13 - /app/blog
export default async function Blog() {
  const pages = await getParsedPages<BlogPageObjectResponse>(
    databaseId
  );
  return (
    <div>
      <main>
        <h1>Blog Posts</h1>
        <div>
          {pages.map((page) => (
            <BlogPageCard
              page={page}
              databaseId={databaseId}
              key={page.id}
            />
          ))}
        </div>
      </main>
    </div>
  );
}
Check out this clean code! (This is a caption)

Columns

This is column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus enim id ligula rutrum fermentum. Cras enim felis, placerat aliquet quam vitae, rhoncus faucibus ante. Fusce vitae turpis sed odio luctus tempor. Ut tristique maximus porta. Maecenas congue, enim nec feugiat euismod, mauris nisl porttitor lacus, vel convallis ipsum nulla ac enim. Morbi facilisis metus et erat imperdiet scelerisque. Nam vehicula tempus dui sed vulputate. Maecenas efficitur elit at porttitor fermentum. Proin eu sagittis diam. Vivamus ultricies eu neque a interdum.

This is column 2

Nullam quam sem, varius ut rutrum vitae, maximus eget arcu. Curabitur neque nisi, sollicitudin nec dapibus vitae, sollicitudin convallis mi. Integer et arcu nec risus elementum suscipit pharetra nec ipsum. Proin semper lobortis quam, et dictum felis rutrum at. Integer hendrerit, ligula in faucibus iaculis, tellus eros commodo lectus, rutrum gravida sapien dolor vel erat. Vestibulum in neque elementum, viverra mi gravida, eleifend ipsum. Mauris tincidunt eros ipsum, nec fermentum ante imperdiet tincidunt. Curabitur sed lacinia neque. Curabitur feugiat justo id augue cursus, quis fringilla nisi vehicula.

Column 1

Donec at suscipit odio. Suspendisse potenti. Curabitur nisl dolor, accumsan ac tempus id, consequat vitae orci. Nulla venenatis urna est, quis efficitur orci convallis quis. Ut nec tellus vestibulum, malesuada lorem sit amet, luctus tellus. Phasellus pellentesque ante et justo placerat volutpat. Duis at convallis nisi. Vivamus at leo vel augue vestibulum fermentum sed non eros. Duis facilisis scelerisque velit ut congue. Fusce luctus commodo purus, vel venenatis nibh placerat eget. Etiam ut libero ac lacus venenatis scelerisque. Donec vitae sollicitudin orci. Curabitur arcu nulla, tempor quis feugiat et, egestas sed lorem. Integer non tempor odio.

Column 2

Proin iaculis ipsum eu vulputate iaculis. Proin fringilla id est a volutpat. Fusce ut dolor eleifend, scelerisque tortor ut, luctus dui. Suspendisse pellentesque molestie ipsum, ac tincidunt magna interdum ac. Mauris tincidunt ex ante, sed egestas justo mollis vel. Sed vitae orci convallis, efficitur diam sed, tristique velit. Sed a odio ultrices velit maximus hendrerit eget non ex.

Column 3

Integer blandit lectus ligula, et elementum justo pulvinar eleifend. Fusce quis viverra risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tortor ex, cursus id volutpat sit amet, commodo quis turpis. Sed eget velit leo. Sed maximus sit amet tellus interdum volutpat. In molestie ipsum odio, a pellentesque arcu ultrices eu. Integer dapibus purus et lorem vulputate, in finibus sapien gravida. Maecenas massa tellus, porttitor nec erat pulvinar, maximus pharetra ligula. Nunc ac consectetur nibh. Etiam at elit mi. Pellentesque id urna fermentum, tempus mauris bibendum, tincidunt nulla.


Simple Tables

RestaurantCuisineRating
Amazing BurgersAmerican10/10
Tasty BurritosMexican9/10
Wild WokChinese5/10


Images

Notion page imageThis is my dog! Isn’t she cute? (This is a caption)

Video

Here she is again! (This is a caption)