Components

Heading 1

Heading 2

Heading 3

Call to action:

CTA Button →

Text block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a pretium leo. Praesent eu sem nulla. In nunc arcu, rutrum eu malesuada sed, lacinia nec ipsum. Maecenas quis tincidunt sem. Quisque vitae nisl vel purus laoreet efficitur quis ut arcu. Nulla sit amet risus hendrerit, tristique augue eu, dapibus risus. Curabitur ullamcorper ligula lacus, sit amet pharetra neque interdum in.

Normal Text

Bold Text

Italic Text

Underlined Text

Strikethrough Text

Linked Text

Code Text

Bullet list block:

  • Bulleted list block item 1
  • Bulleted list block item 2
  • Bulleted list block item 3

Numbered list block:

  1. Numbered list block item 1
  2. Numbered list block item 2
  3. Numbered list block item 3

Todo list block:

Apples
Milk
Bananas

Toggle Block

‣
Toggle block (Summary)

Table of contents block

Quotes

Text block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a pretium leo. Praesent eu sem nulla.

Callouts

💡
Text block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a pretium leo. Praesent eu sem nulla.

Code blocks

import { useState } from 'react';

export default function Component() {
  const [name, setName] = useState('juan');
	return (
		<div>
			{name}
		</div>
	);
}
.notion-code code[class*='language-'],
.notion-code pre[class*='language-'] {
  color: #FAFAFA !important;
  text-shadow: none !important;
}

.notion-code pre::-webkit-scrollbar {
  display: none !important;
}

.notion-code pre {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--color-border-default) !important;
}

Divider block

Table

Users table

NameTags
Juan
OwnerDeveloper
Michel
Designer
Vanessa
Product Manager

Large Gallery

Content Database

Medium Gallery

Content Database

Small Gallery

Content Database

List

Content Database

Varila

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 3, 2022
ReactSupbase
Hyperstream

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 28, 2022
TailwindCSS
FrameUp

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 3, 2022
React
Clickology

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 3, 2022
React
Digio

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 28, 2022
GraphQL
Succulents

HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.

January 3, 2022
Angular
Image block
Image block
Bookmark block