zaruq.me/Components

Components

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
  1. Numbered item
  1. Numbered item
  1. 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
 
.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
 
Call to action:
 
Divider
 
<a>
 
<a>
 
<divider>
 
.notion-link
 
 
.bullet-btn
.notion-divider{ border: 1px solid black;
}
 
 
🎯
Page block (1)
 
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 (1)
 
.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>

 
<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