In the table below you can find a list of all the CSS classes used on a Super site. This is a great resource for referencing when it comes to customizing your site or creating a template. Use your browsers search function to find something quickly.
Default view
Table
‣
Content
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Link | <a> | .notion-link | Content |
Page | <div> | .notion-page | Content |
Page Icon | <div> | .notion-page__icon | Content |
Page Title | <div> | .notion-page__title | Content |
Bullet List | <ul> | .notion-bulleted-list | Content |
Numbered List | <ol> | .notion-numbered-list | Content |
List Item | <li> | .notion-list-item | Content |
To-do | <div> | .notion-to-do | Content |
To-do Content Wrapper | <div> | .notion-to-do__content | Content |
To-do Checkbox Wrapper | <div> | .notion-to-do__icon | Content |
To-do Checkbox (Unchecked) | <div> | .notion-checkbox | Content |
To-do Checkbox (Checked) | <div> | .notion-checkbox.checked | Content |
To-do Title (Unchecked) | <div> | .notion-to-do__title | Content |
To-do Title (Checked) | <div> | .notion-to-do__title.checked | Content |
To-do Check Icon (Unchecked) | <svg> | .notion-checkbox>svg | Content |
To-do Check Icon (Checked) | <svg> | .notion-checkbox.checked>svg | Content |
Toggle | <details> | .notion-toggle | Content |
Toggle Title (Summary) | <summary> | .notion-toggle__summary | Content |
Toggle Icon | (pseudo element) | .notion-toggle__summary::before | Content |
Toggle Content | <div> | .notion-toggle__content | Content |
Quote | <blockquote> | .notion-quote | Content |
Callout | <div> | .notion-callout | Content |
Callout Icon | <div> | .notion-callout__icon | Content |
Callout Content | <p> | .notion-callout__content | Content |
Callout Border | <div> | .notion-callout.border | Content |
Code Content Wrapper | <pre> | .notion-code>pre | Content |
Code Content | <code> | .notion-code code | Content |
Divider | <div> | .notion-divider | Content |
Table of Contents | <ul> | .notion-table-of-contents | Content |
Table of Contents Item | <li> | .notion-table-of-contents__item | Content |
Notion Equations | <span> | .notion-equation | Content |
Notion Equation (Inline) | <span> | .notion-equation.notion-equation__inline | Content |
Notion Equation (Block) | <span> | .notion-equation.notion-equation__block | Content |
‣
Database
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Collection Wrapper | <div> | .notion-collection | Database |
Collection Header | <h3> | .notion-collection__header | Database |
Collection Header Icon | <div> | .notion-collection__header-icon | Database |
Collection Property Pill | <span> | .notion-pill | Database |
Collection Property Title | <div> | .notion-property__title | Database |
Collection Property Date | <div> | .notion-property__date | Database |
Collection Property URL | <div> | .notion-property__url | Database |
Collection Property Relation | <div> | .notion-property__relation | Database |
Collection Property Icon Wrapper | <div> | .notion-property__title__icon-wrapper | Database |
Table Collection Wrapper | <div> | .notion-collection-table__wrapper | Database |
Table Collection | <table> | .notion-collection-table | Database |
Table Collection Header | <thead> | .notion-collection-table__head | Database |
Table Collection Body | <tbody> | .notion-collection-table__body | Database |
Table Collection Cell | <td> | .notion-collection-table__cell | Database |
Gallery Collection | <div> | .notion-collection-gallery | Database |
Gallery Collection (Small) | <div> | .notion-collection-gallery.small | Database |
Gallery Collection (Medium) | <div> | .notion-collection-gallery.medium | Database |
Gallery Collection (Large) | <div> | .notion-collection-gallery.large | Database |
Gallery Collection Card | <div> | .notion-collection-card.gallery | Database |
Gallery Collection Card Content | <div> | .notion-collection-card__content | Database |
Gallery Collection Card Cover | <div> | .notion-collection-card__cover | Database |
Gallery Collection Card Property | <div> | .notion-collection-card__property | Database |
Board Collection | <div> | .notion-collection-board | Database |
Board Collection Column | <div> | .notion-collection-board__column | Database |
Board Collection Column Header | <div> | .notion-collection-board__column-header | Database |
Board Collection Item | <div> | .notion-collection-board__item | Database |
Board Collection Card | <div> | .notion-collection-card.board | Database |
List Collection | <div> | .notion-collection-list | Database |
List Collection Item | <div> | .notion-collection-list__item | Database |
List Collection Item Title | <div> | .notion-collection-list__item-title | Database |
List Collection Item Content | <div> | .notion-collection-list__item-content | Database |
List Collection Item Property | <div> | .notion-collection-list__item-property | Database |
‣
Layout
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Content Container Wrapper | <div> | .super-content | Layout |
Content Container Wrapper (Max width) | <div> | .super-content.max-width | Layout |
Content Container | <article> | .notion-root | Layout |
Column list | <div> | .notion-column-list | Layout |
Column | <div> | .notion-column | Layout |
Notion Header Section | <div> | .notion-header | Layout |
Notion Header Title Wrapper | <div> | .notion-header__title-wrapper | Layout |
Notion Header Title | <h1> | .notion-header__title | Layout |
Notion Header Icon Wrapper | <div> | .notion-header__icon-wrapper | Layout |
Notion Header Icon | <div> | .notion-header__icon | Layout |
Notion Header Cover | <div> | .notion-header__cover | Layout |
‣
Typography
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Text | <p> | .notion-text__content | Typography |
Bold Text | <b> | strong | Typography |
All Headings | n/a | .notion-heading | Typography |
Heading 1 | <h1> | h1.notion-heading | Typography |
Heading 2 | <h2> | h2.notion-heading | Typography |
Heading 3 | <h3> | h3.notion-heading | Typography |
‣
Media
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Notion Caption | <figcaption> | .notion-caption | Media |
Image | <div> | .notion-image | Media |
Image (Type 2) | <img> | .notion-image img | Media |
Bookmark | <div> | .notion-bookmark | Media |
Bookmark Content | <div> | .notion-bookmark__content | Media |
Bookmark Title | <h5> | .notion-bookmark__title | Media |
Bookmark Description | <p> | .notion-bookmark__description | Media |
Bookmark Link | <div> | .notion-bookmark__link | Media |
Bookmark Cover Wrapper | <div> | .notion-bookmark__cover | Media |
Bookmark Cover Image | <img> | .notion-bookmark__cover img | Media |
Video | <div> | .notion-video | Media |
Audio | <div> | .notion-audio | Media |
File | <a> | .notion-file | Media |
File Icon | <div> | .notion-file__icon | Media |
File Title | <span> | .notion-file__title | Media |
File Size Text | <span> | .notion-file__size | Media |
Embedded Content Wrapper (Including caption) | <div> | .notion-embed | Media |
Embedded Content | <div> | .notion-embed__content | Media |
Embedded Content Loader | <div> | .notion-embed__loader | Media |
Embedded Content Iframe wrapper | <div> | .notion-embed__container | Media |
Tweet | <div> | .notion-tweet | Media |
Tweet Header Wrapper | <div> | .static-tweet-header | Media |
Tweet Header Avatar | <a> | .static-tweet-header-avatar | Media |
Tweet Header Author Wrapper | <a> | .static-tweet-header-author | Media |
Tweet Header Name | <span> | .static-tweet-header-name | Media |
Tweet Header Username | <span> | .static-tweet-header-username | Media |
Tweet Header Twitter Button | <a> | .static-tweet-header-brand | Media |
Tweet Text | <p> | .static-tweet-p | Media |
Tweet Image Wrapepr | <div> | .image-container | Media |
Tweet Info | <div> | .static-tweet-info | Media |
‣
Navbar
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Notion Navbar | <div> | .notion-navbar | Navbar |
Notion Navbar Link | <a> | .notion-navbar>a | Navbar |
Notion Navbar Title | <div> | .notion-navbar__title | Navbar |
Notion Navbar Icon | <div> | .notion-navbar__icon | Navbar |
Notion Navbar Search Button | <div> | .notion-navbar__search | Navbar |
Notion Navbar Breadcrumb Divider | <span> | .notion-breadcrumb__divider | Navbar |
Notion Navbar Breadcrumb Item | <div> | .notion-breadcrumb__item | Navbar |
Notion Navbar Breadcrumb Dots | <div> | .notion-breadcrumb__dots | Navbar |
Super Navbar | <nav> | .super-navbar | Navbar |
Super Navbar Logo Wrapper | <div> | .super-navbar__logo-wrapper | Navbar |
Super Navbar Logo | <a> | .super-navbar__logo | Navbar |
Super Navbar Logo (Image) | <div> | .super-navbar__logo-image | Navbar |
Super Navbar Logo (Text) | <span> | .super-navbar__logo-text | Navbar |
Super Navbar CTA Button | <div> | .super-navbar__cta | Navbar |
Super Navbar Content Wrapper | <div> | .super-navbar__content | Navbar |
Super Navbar Item List (Links wrapper) | <div> | .super-navbar__item-list | Navbar |
Super Navbar Item (Link) | <a> | .super-navbar__item | Navbar |
Super Navbar Nav Menu Actions (Buttons wrapper) | <div> | .super-navbar__actions | Navbar |
Super Navbar Nav Menu Wrapper (Popup menu closed) | <div> | .super-navbar__menu-wrapper | Navbar |
Super Navbar Nav Menu Wrapper (Popup menu open) | <div> | .super-navbar__menu-wrapper.active | Navbar |
Super Navbar Nav Menu (Popup menu) | <div> | .super-navbar__menu | Navbar |
Super Navbar Nav Menu List (Popup menu) | <div> | .super-navbar__menu-item-list | Navbar |
Super Navbar Nav Menu List Item (Popup menu) | <a> | .super-navbar__menu-item | Navbar |
Super Navbar Nav Menu Buttons | <div> | .super-navbar__menu-button | Navbar |
Super Navbar Nav Menu Button (Open button) | <div> | .super-navbar__menu-button--open | Navbar |
Super Navbar Nav Menu Button (Close button) | <div> | .super-navbar__menu-button--close | Navbar |
Super Navbar Nav Menu Item (Popup menu) | <a> | .super-navbar__item | Navbar |
Super Navbar Theme Toggle Button | <div> | .super-navbar__theme-toggle | Navbar |
‣
Footer
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Super Footer | <footer> | .super-footer | Footer |
Super Footer Corners | <div> | .super-footer.corners | Footer |
Super Footer Stack | <div> | .super-footer.stack | Footer |
Super Footer Floating | <div> | .super-footer.floating | Footer |
Super Footer Logo | <a> | .super-footer__logo | Footer |
Super Footer Logo Image | <div> | .super-footer__logo-image | Footer |
Super Footer Links | <div> | .super-footer__links | Footer |
Super Footer Link | <a> | .super-footer__link | Footer |
Super Footer Footnote | <p> | .super-footer__footnote | Footer |
Super Footer Social Icons | <div> | .super-footer__icons | Footer |
‣
Search
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Search Wrapper | <div> | .notion-search__wrapper | Search |
Search Box | <div> | .notion-search__box | Search |
Search Input Wrapper | <div> | .notion-search__input | Search |
Search Input Field | <input> | .notion-search__input>input | Search |
Search Box Icon Wrapper | <div> | .notion-search__icon | Search |
Search Box Icon | <svg> | .notion-icon.notion-icon__search | Search |
Search Box Clear Button Wrapper | <div> | .notion-search__clear | Search |
Search Box Clear Button | <svg> | .notion-search__clear>svg | Search |
Search Result Item | <div> | .notion-search__result-item | Search |
Search Result Loader | <div> | .notion-search__result-loader | Search |
Search Result Footer | <div> | .notion-search__result-footer | Search |
‣
Super Password
| Name | HTML Element | CSS Class | Category |
|---|---|---|---|
Super Password | <div> | .super-password-protection | Super Password |
Super Password Content Wrapper | <div> | .super-password-protection__wrapper | Super Password |
Super Password Title | <h1> | .super-password-protection__title | Super Password |
Super Password Input Wrapper | <div> | .super-password-protection__input | Super Password |
Super Password Input Field | <input> | .super-password-protection__input>input | Super Password |
Super Password Lock Icon | <div> | .super-password-protection__input-lock | Super Password |
Super Password Arrow Icon | <div> | .super-password-protection__input-arrow | Super Password |
Super Password Error Message | <p> | .super-password-protection__error | Super Password |