Custom CSS for your issues

Notocat allows you to modify the visuals of your issues on top of Notion’s built-in customization options. One of the options is to add custom CSS to your issues. Read more to learn what are the available classes you can use in the CSS.

Please note that the CSS needs to be valid and supported by all the email clients. We recommend using Can I Email to check the compatibility of your CSS. A small issue in the CSS can invalidate the entire styling of your issue in some email clients.

Available CSS classes

Content blocks

Class	Description
`nc_paragraph`	Paragraphs, lists, todo lists, callouts, quotes, and text in columns
`nc_heading1`, `nc_heading2`, `nc_heading3`	Heading blocks (also get index classes, e.g. `nc_heading1_1`, `nc_heading2_2`)
`nc_code`	Inline code snippets
`nc_divider`	Divider line (`<hr>`)
`nc_divider_wrap`	Wrapper around the divider
`nc_image`	Images (also get index classes, e.g. `nc_image_1`, `nc_image_2`)
`nc_caption`	Image captions

Global index classes

Images and headings receive globally unique index classes in document order. Use them to target specific elements without affecting others.

Class pattern	Description
`nc_image_1`, `nc_image_2`, `nc_image_3`, …	First, second, third image in the issue (cover image counts as first if present)
`nc_heading1_1`, `nc_heading2_2`, `nc_heading3_3`, …	First, second, third heading in the issue (any level)

Each element keeps its base class plus the index class, e.g. nc_image nc_image_1 or nc_heading2 nc_heading2_2. Indices are global across the entire HTML, including nested content (lists, columns, etc.).

Links

Class	Description
`nc_link`	All links in your issue

Callouts & quotes

Class	Description
`nc_callout_box`	Callout block container
`nc_callout_box_bordered`	Callout with border (non-background style)
`nc_quote_box`	Quote block
`nc_icon_cell`	Callout icon table cell
`nc_icon_img`	Callout icon image
`nc_icon_emoji`	Callout emoji icon

Columns

Class	Description
`nc_column`	Column cell
`nc_column_first`	First column (no left padding)
`nc_column_last`	Last column (no right padding)
`nc_column_mid`	Middle column
`nc_column_row`	Row containing columns
`nc_columns`	Columns table container

Layout & structure

Class	Description
`nc_body`	Body of the email (contains the main table)
`nc_full_wrap`	Full-width wrapper table
`nc_main_table`	Main content table (650px)
`nc_aside5`	Outer padding
`nc_aside10`	Inner padding
`nc_h20`	Header spacing
`nc_spacing`	Spacing between blocks
`nc_children_indent`	Indented nested content (e.g. paragraph children)
`nc_empty_block`	Empty block placeholder
`nc_line_tight`	Tight line-height (1.2em) for colored text spans

Unsubscribe

Class	Description
`nc_unsubscribe`	Unsubscribe link section

Notion color classes

These classes are applied when you use Notion’s text or background colors. Use them to override or extend the default styling. Text colors (nc_text_*):

Class	Description
`nc_text_default`	Default text color
`nc_text_gray`	Gray text
`nc_text_brown`	Brown text
`nc_text_orange`	Orange text
`nc_text_yellow`	Yellow text
`nc_text_green`	Green text
`nc_text_blue`	Blue text
`nc_text_purple`	Purple text
`nc_text_pink`	Pink text
`nc_text_red`	Red text

Background colors (nc_bg_*):

Class	Description
`nc_bg_default`	Default (white) background
`nc_bg_gray-background`	Gray background
`nc_bg_brown-background`	Brown background
`nc_bg_orange-background`	Orange background
`nc_bg_yellow-background`	Yellow background
`nc_bg_green-background`	Green background
`nc_bg_blue-background`	Blue background
`nc_bg_purple-background`	Purple background
`nc_bg_pink-background`	Pink background
`nc_bg_red-background`	Red background

Examples

Modifying the spacing between blocks

.nc_spacing {
    height: 10px !important;
    line-height: 10px !important;
}

Changing the links font

.nc_link {
    font-size: 16px;
    font-weight: 600;
}

Changing the font size of the paragraphs

.nc_paragraph {
    font-size: 20px;
}

Changing the main heading style

.nc_heading1 {
  font-size: 30px;
  line-height: 26px;
  padding-top: 1.6em;
  padding-bottom: 3px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #434343;
}

Targeting specific images or headings by index

Use the global index classes to style only certain elements:

/* Style only the first image differently */
.nc_image_1 {
  border-radius: 12px;
}

/* Make the first heading larger than the rest */
.nc_heading1_1 {
  font-size: 36px;
}

Docs

Guides

Custom CSS

Custom CSS for your issues

Available CSS classes

Content blocks

Global index classes

Links

Callouts & quotes

Columns

Layout & structure

Unsubscribe

Notion color classes

Examples

Modifying the spacing between blocks

Changing the links font

Changing the font size of the paragraphs

Changing the main heading style

Targeting specific images or headings by index

​Custom CSS for your issues

​Available CSS classes

​Content blocks

​Global index classes

​Links

​Callouts & quotes

​Columns

​Layout & structure

​Unsubscribe

​Notion color classes

​Examples

​Modifying the spacing between blocks

​Changing the links font

​Changing the font size of the paragraphs

​Changing the main heading style

​Targeting specific images or headings by index

Custom CSS for your issues

Available CSS classes

Content blocks

Global index classes

Links

Callouts & quotes

Columns

Layout & structure

Unsubscribe

Notion color classes

Examples

Modifying the spacing between blocks

Changing the links font

Changing the font size of the paragraphs

Changing the main heading style

Targeting specific images or headings by index