Documentation Index
Fetch the complete documentation index at: https://developer.notocat.com/llms.txt
Use this file to discover all available pages before exploring further.
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) |
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 |
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;
}
