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
Integrate with your favorite tools
Live chat, payments, analytics, and more.
Practically just as fast as lightning
Up to 100x faster than default Notion pages.
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
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.
