Code Snippets

Here is a selection of CSS code snippets for quick and easy customization, head into your site editor and simply add the code snippets below in the CSS tab on the "Code" page.

Image lightbox

Make images open in a lightbox on click, view our guide here.

Database filter

Add filtering/view picker options to your databases, view our guide here.

Links/Buttons

Turn callout blocks with a link into a button

This snippet will only affect callout blocks with one line of text that is a link. It will make the link fill the width and height of the callout turning it into a button so the entire block is clickable rather than just the text.

/* Turn a single line callout block into a button (Entire block is clickable) */
 .notion-callout { 
  position: relative!important;
}

.notion-callout .notion-callout__content .notion-semantic-string span .notion-link {
  position: absolute!important;
  height: 100%!important;
  width: 100%!important;
  top: 0!important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  padding: 15px!important;
  padding-left: 50px!important;
  border: none!important;
}

Change the border radius (rounding) of the Super Navbar Call to action

/* Set the border radius of the Super navbar call to action button */
.super-navbar__cta {
  border-radius: 50px!important;
}