Components- Folio

This page displays how each of the notion components will be rendered in the website.

Heading 1

H1 Grey

H1 Orange

H1 Green

H1 Purple

H1 Red

H1 Brown

H1 Yellow

H1 Blue

H1 Pink

H1 Gray BG

H1 Brown

H1 Orange BG

H1 Green BG

H1 Purple BG

H1 Yellow BG

H1 Blue BG

H1 Pink BG

H1 Red BG

Heading 2

H2 Grey

H2 Brown

H2 Orange

H2 Yellow

H2 Green

H2 Blue

H2 Purple

H2 Pink

H2 Red

H2 Grey bg

H2 Pink BG

H2 Orange BG

H2 Yellow BG

H2 Green BG

H2 Blue BG

H2 Purple BG

H2 Pink BG

H2 Red BG

Heading 3

H3 Grey

H3 Brown

H3 Orange

H3 Yellow

H3 Green

H3 Blue

H3 Purple

H3 Pink

H3 Red

H3 Grey bg

H3 Pink BG

H3 Orange BG

H3 Yellow BG

H3 Green BG

H3 Blue BG

H3 Purple BG

H3 Pink BG

H3 Red BG

Default Quote

Grey Quote

Yellow Quote

Purple Quote

Brown Quote

Green Quote

Pink Quote

Orange Quote

Blue Quote

Red Quote

Default Background Quote

Grey Quote

Yellow Quote

Purple Quote

Brown Quote

Green Quote

Pink Quote

Orange Quote

Blue Quote

Red Quote

Callout blocks

💡

Default Callout

Callout inside 2 column

💡

Grey callout

💡

Brown Callout

3 column callouts

💡

Orange Callout

💡

Yellow Callout

💡

Green Callout

4 column callout

💡

Blue

💡

Purple

💡

Pink

💡

Red

Text Blocks

Normal Text

Bold Text

Italic Text

Underlined Text

~~Strikethrough Text~~

Code Text

Background red-btn

Bulleted list

item

item

item

Numbered List

Numbered item

Numbered item

Numbered item

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 (1)

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 (1)

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