Components

Website components

Table of Contents

 

Explainer video

Heading 1

(👆 used for hero, and headings in home pages)

Heading 2

(used for secondary headings)

Heading 3

(rendered as a bigger text that is used in most of the pages headings in article pages,.

Heading 3 Bold

(Note: Adding bold to the heading h3 is not visible on the notion database but it is properly rendered on website)
Normal Text is used for blogs and articles.
This and the next line are normal text without line breaks
you can use shift+return/enter for smaller spacing between lines.
Adding a new line will create bigger line spacing(since it is a new paragraph).
Bold Text

Call To Action

CTA arrows can be achieved by adding → arrow at the beginning of the link

Callout blocks - Blue colored callout

 
 
 

WE FIGHT FOR INTERNET INTEGRITY

 

→Join us

notion image
 
 
 
 

Gallery view - Small

This styling is done based on the collection name “Teams Database”. Below style will not work if the collection name is changed.
 

Gallery view - Medium

Medium gallery view is used in Read more views in Home and Articles page.
 

Gallery view -Large (Used in Blog database)

Gallery view large is rendered as a single column in Notion, suitable for viewing Publications list.
 

Gallery view -Large (Used in Featured database in publications page)

Gallery view large is rendered as a single column in Notion, suitable for viewing featured Publications list.
To render this featured gallery database, we achieved it by adding a view name on gallery view “featured-report-view"
 
 

Gallery view -Large (Used in Project database)

Large gallery view with
 

Events list view

Styling depends on specific column names and view names used in the list view. Changing these column or view names will disrupt the view design.


Upcoming Events

 
 
Other list view
 
 
 

Buttons

Buttons are created by creating a [link text] along with square braces, and making the entire thing as a link.

Share Icons

Embedding a small snippet of code and rendering it in the website using Bullet’s embed HTML feature.
 

Article Cover Image

Works when you upload as a cover image to any page in Notion.
Recommended aspect ratio: 3:1, size 2400x800px
 

Report/Press Release cover image

Size 754x1031

Publications thumbnail

Recommended size 576x267px

Social Icons - used in about/people and about/general-info

To render social icons used in about/people, we have achieved it by adding a grey callout with title “social-container”.
social-container
notion image
notion image
notion image
notion image
 
Same will be left aligned if you add callout title “social-container-left”. This is used in “about/general-info”. You can select three dots and change the links, alt text, etc.
social-container-left
whattofix.tech
notion image

Callouts

Red Background callout
 
Grey Background callout
 
Brown Background callout
 

Coloured text

Red coloured text
Blue coloured text
Brown coloured text