Notion Component

Notion All Components

 
 
Hero title

Heading 1<h1>

Heading 2 <h2>

Heading 3 <h3>

.notion-title

.notion-h1

.notion-h2

.notion-h3

 
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<div>
 
.notion-text
 
Name
Normal text
Bold text
Italic text
Underline
Strike Through
Linked text
Code text
Tags
<div>
<b>
 
<em>
<span>
<s>
<a>
<code>
Class Name
.notion-text
b
em
.notion-inline-underscore
s
.notion-link
.notion-inline-code
 
 
column block 2
.notion-column
 
.notion-column
Column block 3
.notion-column
 
.notion-column
 
.notion-column
column block 4
.notion-column
.notion-column
.notion-column
.notion-column
column block 5
.notion-column
.notion-column
.notion-column
.notion-column
.notion-column
 
Link block
Link block →
 
Call to action:
Call to action block →
 
Divider
 
<a>
 
<a>
 
<divider>
 
.notion-link
 
 
.bullet-btn
.notion-divider{
border: 1px solid black;
}
 
 
🎯
Page block (2)
 
main
<h1>
<div>
<div>
 
.notion-page
.notion-title
.notion-collection-page-properties
.notion-page-content
 
Bullet list
  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3
<ul>
<li>
<li>
<li>
.notion-list .notion-list-disc
li
li
li
 
 
Number list
  1. Number list 1
  1. Number list 2
  1. Number list 3
<ol>
<li>
<li>
<li>
.notion-list .notion-list-numbered
li
li
li
 
Todo list
Todo checked list
<div>
<div>
<div>
<svg>
<div>
.notion-to-do
.notion-to-do-item
.notion-property-checkbox-checked
.notion-property-checkbox-checked>svg
.notion-to-do-body
Todo list
<div>
<div>
<div>
<svg>
<div>
.notion-to-do
.notion-to-do-item
.notion-property-checkbox-unchecked
.notion-property-checkbox-unchecked>svg
.notion-to-do-body
 
Toggle list
Toggle list 1
toggle item 1
Toggle list 2
toggle child 2
Toggle list 3
child three 3
<details>
<summary>
<div>
 
.notion-toggle
summary
.notion-text
summary::after or summary::before
 
 
Quote
Default Quote
Grey Quote
Yellow Quote
Purple Quote
Brown Quote
Green Quote
Pink Quote
Orange Quote
Blue Quote
Red Quote
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
 
.notion-quote
.notion-quote .notion-gray
.notion-quote .notion-yellow
.notion-quote .notion-purple
.notion-quote .notion-brown
.notion-quote .notion-teal
.notion-quote .notion-pink
.notion-quote .notion-orange
.notion-quote .notion-blue
.notion-quote .notion-red
 
 
 
Background quote
Default Background Quote
Grey Quote
Yellow Quote
Purple Quote
Pink Quote
Green Quote
Brown Quote
Orange Quote
Red Quote
Blue Quote
 
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
notion-quote
notion-quote notion-gray_background
notion-quote notion-yello_background
notion-quote notion-purple_background
notion-quote notion-pink_background
notion-quote notion-teal_background
notion-quote notion-brown_background
notion-quote notion-orange_background
notion-quote notion-red_background
notion-quote notion-blue_background
 
 
 
 
 
Gallery view

.notion-collection
.notion-collection-header
.notion-gallery-grid
Gallery view type of size (2)
 
.notion-collection
.notion-collection-header
.notion-collection-view>.notion-list-collection
notion-list-body
 
 
Board view

To-do
In progress
Complete
Card 2
Card 3
Card 1
.notion-board
.notion-board-view
.notion-board-header
.notion-board-header>.notion-board-header-inner
.notion-board-body
.notion-board-body>.notion-board-group
 
 
 

Toggle Heading <h1>

toggle element

Toggle Heading <h2>

toggle element

Toggle Heading <h3>

 
<details>
<summary>
<div>
 
.notion-toggle
summary
summary>.notion-h1
.notion-toggle>.notion-text
 
 

Callout blocks

 
 
 
💡
Default Callout
💡
Grey callout
💡
Brown Callout
💡
Orange Callout
💡
Yellow Callout
💡
Green Callout
💡
Blue
💡
Purple
💡
Pink
💡
Red
Common all callout
.notion-callout
notion-page-icon-inline
notion-callout-text
.notion-callout
 
.notion-gray_background_co
 
.notion-brown_background_co
 
.notion-orange_background_co
 
.notion-yellow_background_co
 
.notion-teal_background_co
 
.notion-blue_background_co
 
.notion-purple_background_co
 
.notion-pink_background_co
 
.notion-red_background_co
 
Navbar
Top navbar
<nav>
<div>
<div>
.bullet-navbar
.navbar-brand
.navbar-menu
Footer
footer
 
<footer>
.bullet-footer
.bullet-simple-links
.bullet-simple-social-container
.bullet-simple-copyright