Super Sections

Notion recently updated their callout blocks with the ability to nest all sorts of other blocks within them. Simply highlight a block and drag it into a callout to increase it usefulness! Callout blocks have always been useful for bringing attention to various parts of a site or displaying information to your visitors in a clear and noticeable way.

In standard Super fashion, we've added support for this feature right away. We've also created a few sample blocks below to help give inspiration for what you can do with these new callouts. Feel free to copy the blocks and their custom styles for use on your site. These are a great way to add separated sections to your Super site.

Add your own custom domain

Personalize your site with your own URL

image

Integrate with your favorite tools

Live chat, payments, analytics, and more.

image

Practically just as fast as lightning

Up to 100x faster than default Notion pages.

image

That's just the tip of the iceberg

See our full list of features here.

image

Solo

$12/site/month

⭐️ Custom domains

⭐️ Password protection

⭐️ Lightning fast

⭐️ Excellent SEO

⭐️ Automatic SSL

Team

$20/site/month

⭐️ Custom domains

⭐️ Password protection

⭐️ Lightning fast

⭐️ Excellent SEO

⭐️ Automatic SSL

⭐️ More stuff

Enterprise

Contact us

⭐️ Custom domains

⭐️ Password protection

⭐️ Lightning fast

⭐️ Excellent SEO

⭐️ Automatic SSL

⭐️ Even more stuff

Create your first site free. No credit card required.

image

Code

Paste in site settings > code > CSS:

.notion-callout {
  background: #fafafc !important;
  border-radius: 20px !important;
  text-align: center !important;
  padding: 40px !important;
  border: none !important;
}

.notion-callout__content {
  margin: 0 auto !important;
}

.notion-callout__icon {
  display: none !important;
}

.notion-callout h1 {
  letter-spacing: -1.5px !important;
  margin: 0 auto 8px !important;
  font-size: 36px !important;
}

.notion-callout .notion-callout {
  border-radius: 100px !important;
  width: fit-content !important;
  background: #000 !important;
  margin: 0 auto !important;
  color: #fff !important;
  padding: 0 !important;
}

.notion-callout .notion-callout a {
  padding: 12px 24px !important;
  display: block !important;
  opacity: 1 !important;
}

@media (max-width: 600px) {
  
  .notion-callout {
    padding: 24px !important;
  }
  
  .notion-callout .notion-heading {
    letter-spacing: -1px !important;
    font-size: 24px !important;
  }
  
}

Made with Notion & Super. Follow @super_ on Twitter for updates. View this page in Notion.

Copied
Made with Super