About

Take your Notion-Super sites to greater heights with custom CSS, site automations, and powerful workflows.

Hi, welcome to Super Power.

I created this site primarily to help Notion-Super users learn how to customize their sites using basic CSS. This site also serves as design resources for theme creators.

I've designed and sold a couple of themes, and I realized that many of my customers wanted to customize their site further, but they don't really know how.

So, I'd like to share what I've learned and already know with my customers and other Notion-Super users.

Content on this site are free to use and distribute with credit. Big thanks to Notion and Super for creating great products.

Hope it helps.

Yusuf

Design Tutorials

Part 1

Shaping your Notion-Super site

Global site code
Page code
Two ways to shape your site

Part 2

How to inspect and edit elements on a webpage

Edit CSS properties in real-time and apply it to your site

Part 3

CSS essentials

Class and Type selectors
Combining selectors with the same CSS properties
How to use ID
Commenting in CSS
Frequently asked CSS tips

Part 4

Colors

How to use light, dark, and system theme on your site
How to change default Notion colors to your own brand colors
How to create and assign a new color variable

Contribute to this site

Share this site, yusuf.is/super on your social media channels. If you tag me on Twitter (@yusufgiftworks), I'll help to retweet it.
Share your Notion-Super skills, tips, and knowledge by submitting a guest post. It's free, and you can promote yourself and your work, and add any custom scripts to the post page like a Ko-fi or BMAC widget, or page analytics.

Write a guest post →

Support my work

My 2015 13" mac never charges more than 1%.

I'm crowdfunding to buy a new computer for design & video work. If you found this site to be useful, I'd appreciate your support.

For as little as $5, you'll be rewarded with something in return. Kinda like Kickstarter, but you'll get the reward instantly.

Fund & get rewarded →

Part 1: Shaping your site

There are 2 types of code section in Super:

The global site code

Click on site settings → select Code

The page code

Click on site settings → select Pages → click on Edit code

Global site code

If you add lines of code in this section, every single page in your site will inherit this code in them.
A practical use case for a global code is to inject an analytics script like Plausible. You add an analytics script here, every single page of your site will be trackable.
Another use case is to add a CSS theme to your site. Add a script or CSS code, and every single page of your site will have the same style.

Page code

Any lines of code you add here will only be applied to that particular page.
A practical use case is to add a chat or donation widget to a specific page, and not to every single page.

Shaping your site

With the option of global site code and page code, you can either,

Have a site with a consistent theme by adding CSS code or style script in the global site code. In other words, every single page of your site will have the same theme.
You can apply different themes to different pages within your site by adding CSS code or style script to different pages.

An example of number 2:

I have a website @ yusuf.is which uses the default Notion theme. My about page @ yusuf.is/who uses the Watashi theme. My blog @ yusuf.is/writing and design portfolio @ yusuf.is/design pages use the Aimée theme. I like it this way, because it's like I'm exploring different worlds on my site. But you do you.

Part 2: How to inspect and edit elements on a webpage

Part 3: CSS essentials

CSS Tips

How to hide an element

Part 4: Colors

Notion Colors

What is this?

A list of colors that Notion uses on its site by default. With this list, you can customize your site with your own brand colors instead of Notion's by just replacing the color code.

How to use?

Select a theme for the list below.
Copy the CSS code, and paste it in the code section of your site on Super.
Replace the default color code with your own color code in hex or rgb values.
Watch the video tutorial Part 4: Colors for more tips.

CSS code for light theme

:root {
/* text, headings */
    --color-text-default: rgb(55, 53, 47);
/* media caption */
    --color-text-default-light: rgba(55, 53, 47, 0.6);
/* text, quote, toggle, callout colors */
    --color-text-gray: rgb(155, 154, 151);
    --color-text-brown: rgb(100, 71, 58);
    --color-text-orange: rgb(217, 115, 13);
    --color-text-yellow: rgb(223, 171, 1);
    --color-text-green: rgb(15, 123, 108);
    --color-text-blue: rgb(11, 110, 153);
    --color-text-purple: rgb(105, 64, 165);
    --color-text-pink: rgb(173, 26, 114);
    --color-text-red: rgb(224, 62, 62);
/* text, quote, toggle background colors */
    --color-bg-default: rgb(255, 255, 255);
    --color-bg-gray: rgb(235, 236, 237);
    --color-bg-brown: rgb(233, 229, 227);
    --color-bg-orange: rgb(250, 235, 221);
    --color-bg-yellow: rgb(251, 243, 219);
    --color-bg-green: rgb(221, 237, 234);
    --color-bg-blue: rgb(221, 235, 241);
    --color-bg-purple: rgb(234, 228, 242);
    --color-bg-pink: rgb(244, 223, 235);
    --color-bg-red: rgb(251, 228, 228);
/* callout background colors */
    --color-bg-gray-light: rgba(235, 236, 237, 0.3);
    --color-bg-brown-light: rgba(233, 229, 227, 0.3);
    --color-bg-orange-light: rgba(250, 235, 221, 0.3);
    --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
    --color-bg-green-light: rgba(221, 237, 234, 0.3);
    --color-bg-blue-light: rgba(221, 235, 241, 0.3);
    --color-bg-purple-light: rgba(234, 228, 242, 0.3);
    --color-bg-pink-light: rgba(244, 223, 235, 0.3);
    --color-bg-red-light: rgba(251, 228, 228, 0.3);
/* tags (multi-select, select) colors */
    --color-pill-default: rgba(206, 205, 202, 0.5);
    --color-pill-gray: rgba(155, 154, 151, 0.4);
    --color-pill-brown: rgba(140, 46, 0, 0.2);
    --color-pill-orange: rgba(245, 93, 0, 0.2);
    --color-pill-yellow: rgba(233, 168, 0, 0.2);
    --color-pill-green: rgba(0, 135, 107, 0.2);
    --color-pill-blue: rgba(0, 120, 223, 0.2);
    --color-pill-purple: rgba(103, 36, 222, 0.2);
    --color-pill-pink: rgba(221, 0, 129, 0.2);
    --color-pill-red: rgba(255, 0, 26, 0.2);
/* gallery, board cards color when hovered */
    --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
    --color-ui-hover-bg-light: rgba(55, 53, 47, 0.03);
/* gallery, board cards background color */
    --color-card-bg: rgb(255, 255, 255);
    --color-accent-bg: rgb(46, 170, 220);
/* horizontal divider, card border */
    --color-border-default: rgba(235, 236, 237, 0.8);
    --color-border-dark: rgba(55, 53, 47, 0.16);
}

CSS code for dark theme

:root {
/* text, headings */
    --color-text-default: rgba(255,255,255,0.9);
/* media caption */
    --color-text-default-light: rgba(255, 255, 255, 0.9);
/* text, quote, toggle, callout colors */
    --color-text-gray: rgba(151, 154, 155, 0.95);
    --color-text-brown: #937264;
    --color-text-orange: #FFA344;
    --color-text-yellow: #FFDC49;
    --color-text-green: #4DAB9A;
    --color-text-blue: #529CCA;
    --color-text-purple: #9A6DD7;
    --color-text-pink: #E255A1;
    --color-text-red: #FF7369;
/* text, quote, toggle background colors */
    --color-bg-default: #2f3437;
    --color-bg-gray: #454B4E;
    --color-bg-brown: #434040;
    --color-bg-orange: #594A3A;
    --color-bg-yellow: #59563B;
    --color-bg-green: #354C4B;
    --color-bg-blue: #364954;
    --color-bg-purple: #443F57;
    --color-bg-pink: #533B4C;
    --color-bg-red: #594141;
/* callout background colors */
    --color-bg-gray-light: rgba(69, 75, 78, 0.3);
    --color-bg-brown-light: rgba(67, 64, 64, 0.3);
    --color-bg-orange-light: rgba(89, 74, 58, 0.3);
    --color-bg-yellow-light: rgba(89, 86, 59, 0.3);
    --color-bg-green-light: rgba(53, 76, 75, 0.3);
    --color-bg-blue-light: rgba(120, 162, 187, 0.3);
    --color-bg-purple-light: rgba(68, 63, 87, 0.3);
    --color-bg-pink-light: rgba(83, 59, 76, 0.3);
    --color-bg-red-light: rgba(89, 65, 65, 0.3);
/* tags (multi-select, select) colors */
    --color-pill-default: rgba(206, 205, 202, 0.5);
    --color-pill-gray: rgba(151,154,155,0.5);
    --color-pill-brown: rgba(147,114,100,0.5);
    --color-pill-orange: rgba(255,163,68,0.5);
    --color-pill-yellow: rgba(255,220,73,0.5);
    --color-pill-green: rgba(77,171,154,0.5);
    --color-pill-blue: rgba(82,156,202,0.5);
    --color-pill-purple: rgba(154,109,215,0.5);
    --color-pill-pink: rgba(226,85,161,0.5);
    --color-pill-red: rgba(255,115,105,0.5);
/* gallery, board cards color when hovered */
    --color-ui-hover-bg: rgb(71,76,80);
    --color-ui-hover-bg-light: rgb(71,76,80);
/* gallery, board cards background color */
    --color-card-bg: #2f3437;
    --color-accent-bg: #364954;
/* horizontal divider, card border */
    --color-border-default: rgb(69, 75, 78);
    --color-border-dark: rgb(69, 75, 78);
}

CSS code for system theme

@media (prefers-color-scheme: light) {
	:root {
		/* text, headings */
    --color-text-default: rgb(55, 53, 47);
		/* media caption */
    --color-text-default-light: rgba(55, 53, 47, 0.6);
		/* text, quote, toggle, callout colors */
    --color-text-gray: rgb(155, 154, 151);
    --color-text-brown: rgb(100, 71, 58);
    --color-text-orange: rgb(217, 115, 13);
    --color-text-yellow: rgb(223, 171, 1);
    --color-text-green: rgb(15, 123, 108);
    --color-text-blue: rgb(11, 110, 153);
    --color-text-purple: rgb(105, 64, 165);
    --color-text-pink: rgb(173, 26, 114);
    --color-text-red: rgb(224, 62, 62);
		/* text, quote, toggle background colors */
    --color-bg-default: rgb(255, 255, 255);
    --color-bg-gray: rgb(235, 236, 237);
    --color-bg-brown: rgb(233, 229, 227);
    --color-bg-orange: rgb(250, 235, 221);
    --color-bg-yellow: rgb(251, 243, 219);
    --color-bg-green: rgb(221, 237, 234);
    --color-bg-blue: rgb(221, 235, 241);
    --color-bg-purple: rgb(234, 228, 242);
    --color-bg-pink: rgb(244, 223, 235);
    --color-bg-red: rgb(251, 228, 228);
		/* callout background colors */
    --color-bg-gray-light: rgba(235, 236, 237, 0.3);
    --color-bg-brown-light: rgba(233, 229, 227, 0.3);
    --color-bg-orange-light: rgba(250, 235, 221, 0.3);
    --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
    --color-bg-green-light: rgba(221, 237, 234, 0.3);
    --color-bg-blue-light: rgba(221, 235, 241, 0.3);
    --color-bg-purple-light: rgba(234, 228, 242, 0.3);
    --color-bg-pink-light: rgba(244, 223, 235, 0.3);
    --color-bg-red-light: rgba(251, 228, 228, 0.3);
		/* tags (multi-select, select) colors */
    --color-pill-default: rgba(206, 205, 202, 0.5);
    --color-pill-gray: rgba(155, 154, 151, 0.4);
    --color-pill-brown: rgba(140, 46, 0, 0.2);
    --color-pill-orange: rgba(245, 93, 0, 0.2);
    --color-pill-yellow: rgba(233, 168, 0, 0.2);
    --color-pill-green: rgba(0, 135, 107, 0.2);
    --color-pill-blue: rgba(0, 120, 223, 0.2);
    --color-pill-purple: rgba(103, 36, 222, 0.2);
    --color-pill-pink: rgba(221, 0, 129, 0.2);
    --color-pill-red: rgba(255, 0, 26, 0.2);
		/* gallery, board cards color when hovered */
    --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
    --color-ui-hover-bg-light: rgba(55, 53, 47, 0.03);
		/* gallery, board cards background color */
    --color-card-bg: rgb(255, 255, 255);
    --color-accent-bg: rgb(46, 170, 220);
		/* horizontal divider, card border */
    --color-border-default: rgba(235, 236, 237, 0.8);
    --color-border-dark: rgba(55, 53, 47, 0.16);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		/* text, headings */
    --color-text-default: rgba(255,255,255,0.9);
		/* media caption */
    --color-text-default-light: rgba(255, 255, 255, 0.9);
		/* text, quote, toggle, callout colors */
    --color-text-gray: rgba(151, 154, 155, 0.95);
    --color-text-brown: #937264;
    --color-text-orange: #FFA344;
    --color-text-yellow: #FFDC49;
    --color-text-green: #4DAB9A;
    --color-text-blue: #529CCA;
    --color-text-purple: #9A6DD7;
    --color-text-pink: #E255A1;
    --color-text-red: #FF7369;
		/* text, quote, toggle background colors */
    --color-bg-default: #2f3437;
    --color-bg-gray: #454B4E;
    --color-bg-brown: #434040;
    --color-bg-orange: #594A3A;
    --color-bg-yellow: #59563B;
    --color-bg-green: #354C4B;
    --color-bg-blue: #364954;
    --color-bg-purple: #443F57;
    --color-bg-pink: #533B4C;
    --color-bg-red: #594141;
		/* callout background colors */
    --color-bg-gray-light: rgba(69, 75, 78, 0.3);
    --color-bg-brown-light: rgba(67, 64, 64, 0.3);
    --color-bg-orange-light: rgba(89, 74, 58, 0.3);
    --color-bg-yellow-light: rgba(89, 86, 59, 0.3);
    --color-bg-green-light: rgba(53, 76, 75, 0.3);
    --color-bg-blue-light: rgba(120, 162, 187, 0.3);
    --color-bg-purple-light: rgba(68, 63, 87, 0.3);
    --color-bg-pink-light: rgba(83, 59, 76, 0.3);
    --color-bg-red-light: rgba(89, 65, 65, 0.3);
		/* tags (multi-select, select) colors */
    --color-pill-default: rgba(206, 205, 202, 0.5);
    --color-pill-gray: rgba(151,154,155,0.5);
    --color-pill-brown: rgba(147,114,100,0.5);
    --color-pill-orange: rgba(255,163,68,0.5);
    --color-pill-yellow: rgba(255,220,73,0.5);
    --color-pill-green: rgba(77,171,154,0.5);
    --color-pill-blue: rgba(82,156,202,0.5);
    --color-pill-purple: rgba(154,109,215,0.5);
    --color-pill-pink: rgba(226,85,161,0.5);
    --color-pill-red: rgba(255,115,105,0.5);
		/* gallery, board cards color when hovered */
    --color-ui-hover-bg: rgb(71,76,80);
    --color-ui-hover-bg-light: rgb(71,76,80);
		/* gallery, board cards background color */
    --color-card-bg: #2f3437;
    --color-accent-bg: #364954;
		/* horizontal divider, card border */
    --color-border-default: rgb(69, 75, 78);
    --color-border-dark: rgb(69, 75, 78);
	}
}

Notion-Super elements

What is this?

Each Notion block in Super has a specific CSS class assigned to it. By knowing the CSS class a Notion block has been assigned to, we can customize its property to suit our needs.

How to use?

Determine which block you would like to re-purpose.
Copy its CSS code to the code section of your site on Super
Edit the properties to your liking.

Note

This list might not include every single Notion-Super elements. I will try to update the list from time-to-time.

Common

/* Headings */

.notion-heading {
  font-weight: 700;
  margin-bottom: 0;
  padding: 3px 2px;
  position: relative;
}

h1.notion-heading {
  font-size: 1.875rem;
}

h2.notion-heading {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

h3.notion-heading {
  margin-top: .75rem;
  font-size: 1.25rem;
}

/* Page Header */

.notion-header {
  width: 100%;
  margin-bottom: 16px;
}

.notion-header.collection .notion-header__cover {
  max-height: 24vh;
  height: 24vh;
}

.notion-header.collection .notion-header__cover.no-cover {
  max-height: 0;
  height: 0;
}

.notion-header__content {
  padding-left: calc(env(safe-area-inset-left) + 96px);
  padding-right: calc(env(safe-area-inset-right) + 96px);
}

.notion-header__title {
  font-weight: 700;
  padding: 2px;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 2.5rem;
  line-height: 2.5rem;
  min-height: 48px;
  white-space: pre-wrap;
  word-break: break-word;
}

.notion-header__description {
  margin-top: 6px;
  font-size: 12px;
}

/* Text */

.notion-text {
  min-height: calc(1.5rem + 10px);
}

.notion-text__content {
  padding: 3px 2px;
  margin: 0;
}

.notion-semantic-string {
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Divider */

.notion-divider {
  width: 100%;
  border-bottom: 1px solid var(--color-border-default);
  margin: 8px 0;
}

/* Code */

.notion-semantic-string .code {
  border-radius: 5px;
  background-color: var(--color-ui-hover-bg);
  color: #ff4081;
  font-size: .9em;
  padding: .2em .4em;
  word-break: break-word;
}

/* Link */

.notion-semantic-string .link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-default-light);
  opacity: .7;
  transition: border-color .1s ease-in,opacity .1s ease-in;
}

/* To-do */

.notion-to-do__content {
  display: flex;
  padding: 3px 0;
  margin: 2px 0;
  line-height: 1.5;
}

.notion-to-do__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  width: 1.5em;
  -webkit-margin-start: 2px;
  margin-inline-start: 2px;
  -webkit-margin-end: 4px;
  margin-inline-end: 4px;
  flex-shrink: 0;
}

.notion-checkbox {
  display: flex;
}

.notion-checkbox>svg {
  width: 1em;
  height: 1em;
  fill: inherit;
}

.notion-checkbox.checked {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  background: var(--color-accent-bg);
}

.notion-checkbox.checked>svg {
  width: .75em;
  height: .75em;
  fill: #fff;
}

/* Bullet/Number List */

.notion-bulleted-list {
  list-style-type: disc;
}

.notion-bulleted-list, .notion-numbered-list {
  margin: 2px 0;
  -webkit-padding-start: calc(1.5em + 4px);
  padding-inline-start: calc(1.5em + 4px);
  line-height: 1.5;
}

.notion-list-item {
  margin: 2px 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Toggle */

.notion-toggle {
  margin: 1px 0;
}

.notion-toggle__summary {
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
}

.notion-toggle__summary:before {
  content: "\025B8";
  font-size: 1.2em;
  border-radius: 3px;
  padding: 1px 7px;
  margin: 0 5px 0 2px;
  line-height: 1.1;
  position: absolute;
}

.notion-toggle__summary .notion-semantic-string {
  -webkit-padding-start: calc(1.5em + 6px);
  padding-inline-start: calc(1.5em + 6px);
}

/* Quote */

.notion-quote {
  -webkit-border-start: 3px solid currentcolor;
  border-inline-start: 3px solid currentcolor;
  margin: .5rem 0;
  padding: .1em .9em;
  font-size: 1.2em;
}

/* Callout and Icon */

.notion-callout {
  display: flex;
  border-radius: 3px;
  padding: 16px 16px 16px 12px;
  margin-top: 2px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  overflow: hidden;
}

.notion-callout.border {
  border: 1px solid var(--color-border-default);
}

.notion-callout__icon {
  min-width: 1.5em;
  width: 1.8em;
}

.notion-callout__icon .notion-icon {
  width: 1.3em;
  font-size: 1.3em;
  line-height: 1.1em;
}

.notion-icon {
  text-align: start;
  border-radius: 3px;
}

.notion-callout__content {
  -webkit-margin-start: 8px;
  margin-inline-start: 8px;
  overflow: hidden;
}

/* Bookmark */

.notion-bookmark {
  margin: 4px 0;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  transition: background .12s ease-in 0s;
}

.notion-bookmark>a {
  color: inherit;
  text-decoration: none;
  display: flex;
}

.notion-bookmark__content {
  overflow: hidden;
  flex: 4 1 180px;
  padding: 12px 14px 10px;
}

.notion-bookmark__title {
  margin: 0 0 2px;
  line-height: 20px;
  min-height: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notion-bookmark__description {
  margin: 0;
  font-size: 12px;
  line-height: 1rem;
  opacity: .6;
  height: 2rem;
  overflow: hidden;
}

.notion-bookmark__link {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.notion-bookmark__cover {
  flex: 1 1 180px;
  display: block;
  position: relative;
  height: 108px;
  width: 500px;
}

/* Caption */

.notion-caption {
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: .875em;
}

/* Image */

.notion-image {
  margin-top: .5em;
  margin-bottom: .5em;
  align-self: center;
}

.notion-image.page-width>figcaption {
  padding: 6px 2px;
}

/* File */

.notion-file {
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
}

.notion-file__icon {
  -webkit-margin-start: 2px;
  margin-inline-start: 2px;
  -webkit-margin-end: 4px;
  margin-inline-end: 4px;
  width: 1.5em;
  text-align: center;
}

.notion-file__title {
  line-height: 1.5;
}

.notion-file__size {
  -webkit-margin-start: 6px;
  margin-inline-start: 6px;
  color: var(--color-text-default-light);
  font-size: .75em;
}

/* Notion Pill */

.notion-pill {
  padding: 0 6px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
  display: inline-block;
  margin: 3px 0;
  margin-inline-end: 6px;
}

.notion-pill.large {
  font-size: 14px;
  line-height: 18px;
}

/* Super Content */

.super-content {
    padding-left: calc(env(safe-area-inset-left) + 96px);
    padding-right: calc(env(safe-area-inset-right) + 96px);
    padding-bottom: 30vh;
}

Navbar

/* Navbar (Notion default) */

.notion-navbar {
  height: 45px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  background-color: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--color-bg-default);
}

.notion-navbar>a.has-icon {
  padding: 2px 6px;
}

.notion-navbar>a {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 3px 6px;
  text-decoration: none;
  color: inherit;
  transition: .3s ease;
  height: 24px;
}

.notion-navbar .notion-breadcrumb__divider {
  color: var(--color-text-default-light);
  margin: 0 2px;
  cursor: default;
  font-size: 14px;
}

.notion-navbar__title {
  line-height: 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(40vw - 66px);
}

.notion-navbar__search {
  position: absolute;
  top: 0;
  inset-inline-end: 16px;
  bottom: 0;
  padding: 6px;
  line-height: 45px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

Database

/* Gallery */

.notion-collection-gallery {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 16px;
  gap: 16px;
  border-top: 1px solid var(--color-border-dark);
  padding-top: 16px;
  padding-bottom: 4px;
}

/* Board */

.notion-collection-board {
  width: 100%;
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--color-border-dark);
  padding-bottom: 4px;
  overflow-x: scroll;
}

.notion-collection-board__column {
  width: 100%;
  padding: 1px;
}

.notion-collection-board__column-header {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
}

.notion-collection-board__item {
    margin-bottom: 8px;
}

/* List */

notion-collection-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  padding: 6px 0;
  border-top: 1px solid var(--color-border-dark);
}

/* Table */

.notion-collection-table__wrapper {
  overflow-x: auto;
}

.notion-collection-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 10px;
}

.notion-collection-table th {
  text-align: start;
  font-weight: normal;
  color: var(--color-text-default-light);
  width: 200px;
}

.notion-collection-table td, .notion-collection-table th {
  padding: 0 8px;
  height: 2rem;
  border: 1px solid var(--color-border-default);
  overflow: hidden;
  word-break: break-word;
}

/* Collection */

.notion-collection__header {
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1px;
  padding: 3px 2px;
  display: flex;
  align-items: center;
}

.notion-collection-card {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px hsl(0deg 0% 6% / 10%), 0 2px 4px hsl(0deg 0% 6% / 10%);
  border-radius: 3px;
  transition: background .12s ease-in 0s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-card-bg);
}

.notion-collection-card .notion-collection-card__anchor {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

.notion-collection-card__cover {
  min-height: 115px;
  height: 200px;
  border-bottom: 1px solid var(--color-border-default);
  overflow: hidden;
}

.notion-property__title {
  display: flex;
  align-items: center;
}

.notion-collection-card .notion-property__title {
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
}

.notion-property__title .notion-property__title__icon-wrapper {
  -webkit-margin-end: 5px;
  margin-inline-end: 5px;
  display: inline-flex;
  position: relative;
  top: 2px;
}

.notion-collection-card__content {
  padding-bottom: 10px;
  -webkit-padding-start: 10px;
  padding-inline-start: 10px;
  font-size: .75em;
  overflow: hidden;
}

.notion-collection-card__property {
  min-height: 24px;
  display: flex;
  align-items: center;
  z-index: 10;
}

.notion-collection-card__content .notion-property__select {
  width: 100%;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
}

Articles

Discover how you can accomplish more with Notion & Super.

How to create custom keyboard shortcuts

Yusuf Giftworks

Workflow Tips

Sep 20, 2021

How to invert the color of an element

Yusuf Giftworks

Design Tips

Sep 14, 2021

How to create columns in a Callout block

Yusuf Giftworks

Notion Tips

Sep 13, 2021

Contribute to Articles

Notion-Super Themes

Portal

RésuméCV

Sep 17, 2021

Watashi

Personal SiteLanding Page

Aug 5, 2021

Aimée

BlogPortfolio

Aug 19, 2021

Theme by Watashi

Page Contents

Design

Part 1: Shaping your site

Part 2: How to inspect and edit elements

Part 3: CSS essentials

Part 4: Customizing colors

Resources

Blog

Shop

Hidden Pages

Super Power

About

Design Tutorials

Contribute to this site

Write a guest post →

Support my work

Fund & get rewarded →

Part 1: Shaping your site

Part 2: How to inspect and edit elements on a webpage

Part 3: CSS essentials

Part 4: Colors

Notion Colors

Notion-Super elements

Articles

Articles

Contribute to Articles

Notion-Super Themes

Project

Theme by Watashi