Super CSS Classes

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.

‣

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	<div>	.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	<div>	.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

‣

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

← Previous

Notion colors