Notion-components

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

Column block 3

.notion-column

column block 4

.notion-column

column block 5

.notion-column

Link block

Link block →

Call to action:

Call to action block →

Divider

<a>

.notion-link

.bullet-btn

.notion-divider{
   border: 1px solid black;

}

🎯

Page block (2)

main

<h1>

<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>

.notion-list .notion-list-disc

li

Number list

Number list 1

Number list 2

Number list 3

<ol>

<li>

.notion-list .notion-list-numbered

li

Todo list

Todo checked list

<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>

<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

<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

.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

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

Page 1

Page 2

Page 3

.notion-collection

.notion-collection-header

.notion-gallery-grid

Gallery view type of size (2)

List view

Page 1

Page 2

Page 3

.notion-collection

.notion-collection-header

.notion-collection-view>.notion-list-collection

notion-list-body

Board view

.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>

<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>

.bullet-navbar

.navbar-brand

.navbar-menu

Footer

footer

.bullet-footer

.bullet-simple-links

.bullet-simple-social-container