Super CSS Classes

Super CSS Classes

NameHTML ElementCSS ClassCategoryImage
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
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
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
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
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
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
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
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
<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
Copied
Made with Super