Heading 1

Heading 2

Heading 3

Call to action:

CTA Button →

Text block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a pretium leo. Praesent eu sem nulla. In nunc arcu, rutrum eu malesuada sed, lacinia nec ipsum. Maecenas quis tincidunt sem. Quisque vitae nisl vel purus laoreet efficitur quis ut arcu. Nulla sit amet risus hendrerit, tristique augue eu, dapibus risus. Curabitur ullamcorper ligula lacus, sit amet pharetra neque interdum in.

Normal Text

Bold Text

Italic Text

Underlined Text

Strikethrough Text

Linked Text

Code Text

Table of contents block

• Heading 1
• Heading 2
• Heading 3
• Call to action:
• Bullet list block:
• Numbered list block:
• Todo list block:
• Toggle Block
• Table of contents block
• Quotes
• Callouts
• Code blocks
• Divider block
• Table
• Large Gallery
• Medium Gallery
• Small Gallery
• List

Quotes

Text block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a pretium leo. Praesent eu sem nulla.

Callouts

Code blocks

import { useState } from 'react';

export default function Component() {
  const [name, setName] = useState('juan');
	return (
		<div>
			{name}
		</div>
	);
}

.notion-code code[class*='language-'],
.notion-code pre[class*='language-'] {
  color: #FAFAFA !important;
  text-shadow: none !important;
}

.notion-code pre::-webkit-scrollbar {
  display: none !important;
}

.notion-code pre {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--color-border-default) !important;
}

Divider block

Table

Large Gallery

Medium Gallery

Small Gallery

List

Super - Build websites with Notion

Everything you need to build fast, functional websites with Notion. Custom domains, themes, password-protection, and more-no code required.

super.so