Use this page as a starting point for learning how to add your own styles to blocks. Go ahead and open the Developer Tools and inspect a block to get started. You can refer to our CSS Classes here.

Heading 1 block

Heading 2 block

Heading 3 block

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

Link block →

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

Quote block

Callout block default

Callout block grey

Callout block brown

Callout block orange

Callout block yellow

Callout block green

Callout block blue

Callout block purple

Callout block pink

Callout block red

/* CODE BLOCK */
	code {
		background: #000;
	}

Divider block

Gallery collection block

⚡

Page 1

Mar 28, 2022 5:24 PM

Type 1

⚡

Page 2

Mar 28, 2022 5:24 PM

Type 1

Board collection block

Status 1

⚡

Page 1

Status 2

⚡

Page 2

Inline equation block

$E = mc²$

Equation block

Super - Build websites with Notion

Everything you need to build fast, functional websites with Notion. Custom domains, themes, password-protection, and more-no code required.

super.so

Breadcrumbs block

Table of contents block

• Heading 1 block
• Heading 2 block
• Heading 3 block
• Toggle heading 1
• Toggle heading 2
• Toggle heading 3

Text color default