Super Sections

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

Made with Super