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
Column block 1
Column block 2
Column block 3
Link block →
Page blockBullet list block
- Bulleted list block item 1
- Bulleted list block item 2
- Bulleted list block item 3
Numbered list block
- Numbered list block item 1
- Numbered list block item 2
- Numbered list block item 3
Todo list block
Toggle heading 1
Toggle heading 2
Toggle heading 3
Quote block
Callout block brown
/* CODE BLOCK */
code {
background: #000;
}Divider block
Inline equation block
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
Text color gray
Text color brown
Text color orange
Text color yellow
Text color green
Text color blue
Text color purple
Text color pink
Text color red
Background color gray
Background color brown
Background color orange
Background color yellow
Background color green
Background color blue
Background color purple
Background color pink
Background color red