Skip to main content

​
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

ClassDescription
nc_paragraphParagraphs, lists, todo lists, callouts, quotes, and text in columns
nc_heading1, nc_heading2, nc_heading3Heading blocks (also get index classes, e.g. nc_heading1_1, nc_heading2_2)
nc_codeInline code snippets
nc_dividerDivider line (<hr>)
nc_divider_wrapWrapper around the divider
nc_imageImages (also get index classes, e.g. nc_image_1, nc_image_2)
nc_captionImage 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 patternDescription
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.).
ClassDescription
nc_linkAll links in your issue

​
Callouts & quotes

ClassDescription
nc_callout_boxCallout block container
nc_callout_box_borderedCallout with border (non-background style)
nc_quote_boxQuote block
nc_icon_cellCallout icon table cell
nc_icon_imgCallout icon image
nc_icon_emojiCallout emoji icon

​
Columns

ClassDescription
nc_columnColumn cell
nc_column_firstFirst column (no left padding)
nc_column_lastLast column (no right padding)
nc_column_midMiddle column
nc_column_rowRow containing columns
nc_columnsColumns table container

​
Layout & structure

ClassDescription
nc_bodyBody of the email (contains the main table)
nc_full_wrapFull-width wrapper table
nc_main_tableMain content table (650px)
nc_aside5Outer padding
nc_aside10Inner padding
nc_h20Header spacing
nc_spacingSpacing between blocks
nc_children_indentIndented nested content (e.g. paragraph children)
nc_empty_blockEmpty block placeholder
nc_line_tightTight line-height (1.2em) for colored text spans

​
Unsubscribe

ClassDescription
nc_unsubscribeUnsubscribe 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_*):
ClassDescription
nc_text_defaultDefault text color
nc_text_grayGray text
nc_text_brownBrown text
nc_text_orangeOrange text
nc_text_yellowYellow text
nc_text_greenGreen text
nc_text_blueBlue text
nc_text_purplePurple text
nc_text_pinkPink text
nc_text_redRed text
Background colors (nc_bg_*):
ClassDescription
nc_bg_defaultDefault (white) background
nc_bg_gray-backgroundGray background
nc_bg_brown-backgroundBrown background
nc_bg_orange-backgroundOrange background
nc_bg_yellow-backgroundYellow background
nc_bg_green-backgroundGreen background
nc_bg_blue-backgroundBlue background
nc_bg_purple-backgroundPurple background
nc_bg_pink-backgroundPink background
nc_bg_red-backgroundRed background

​
Examples

​
Modifying the spacing between blocks

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

.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;
}