Nam Hoai NguyenMy taking notes
🏀

Demo all notion components on this site

List out all components which I usually use

Nam-Hoai Nguyen
added
updated
AllNext.JsWeb DevSSGCMS

Basic blocks

Text

All kind of text styling options are supported. Basic text blocks are skin to HTML <p/> tags. Text blocks also support a variety of rich text formatting options
All text colors: default, gray, brown, orange, yellow, green, blue, purple, pink, red
All text background: default, gray, brown, orange, yellow, green, blue, purple, pink, red
Mention URL: Embeds, bookmarks & link mentions – Notion Help Center

Quote

This is example quote

Toggle (or hide/show)

Toggle heading

Ordered list

  1. tem 1
      • Nested unordered list
      • Another.
  1. Item 2.
    1. Level 2.
      1. Level 3.

Unordered list

  • Item 1
    • Level 2
      • Level 3
    • Another level 2
  • Item 1.
    • Level 2
      • Level 3
  • Item 2.
      1. Nested ordered list
      1. Another.
  • Item 2
      1. Nested ordered list
      1. Another list item

Todo list

Task 1 done
Task 2

Divider

Integration

Github

namhoainguyen.com
namnh198
Jul 19, 2026
Integrate Github inline
namhoainguyen.com
 of the text
Mention: GitHub - namnh198/dotfiles-public: My Stow dotfile configurations
Of course you can even embed a gist

Bookmark

👉 Check out my list of bookmarks
Bookmarks
Astro description
https://www.namhoainguyen.com/bookmarks

Image

👇 Click the image to see it in the bigger size
This is a caption of this figure

Video

Hello Viet Nam

Equations

This is inline equation. And below is a block equation
With numbering
If you don’t want to see the equation numbering,

Table

ㅤ
Header 1
Header 2
Column 1
Item 1
Item 2
Column 2
Item 2
Item 2

Code

This is inline code and below are block code with highlighted. Note that, there is a copy button on the top-right corner of the block of code.
1def sum_and_div(num1, num2):
2  sum_nums = num1 + num2
3  div_nums = num1 / num2
4  return sum_nums, div_nums # multiple returns
5
6sum, div = sum_and_div(18, 9)
7print(sum, div)

Mermaid

1graph TD
2  Mermaid --> Diagram
graph TD Mermaid --> Diagram

Advanced Blocks

Column

1print(1)
1print(2)
or 3 columns (or 4 columns if you want)
1print(1)
1print(2)
1print(3)

Columns with different sizes

This one has a greater length than other side. This sentence has no meaning. It’s just for a temporary test
1print(1)
This one has a shorter length than other side. This sentence has no meaning; it’s just for a temporary test

Nested of nested

Side by side code and figure
1print(1)
 
This is a caption of this figure

Toggle heading

Synced blocks

You also use synced block. Note that, the below sentence is a clone of this sentence.

Link to another page

You can @ to link to other pages too. For example Docker