Components

Heading 1

Heading 2

Heading 3

Call to action:

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

Code Text

Bullet list block:

  • Bulleted list block item 1
  • Bulleted list block item 2
  • Bulleted list block item 3

Numbered list block:

  1. Numbered list block item 1
  2. Numbered list block item 2
  3. Numbered list block item 3

Todo list block:

Apples
Milk
Bananas

Toggle Block

Toggle block (Summary)

Table of contents block

Quotes

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

Callouts

💡

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

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

Users table

NameTags
Juan
OwnerDeveloper
Michel
Designer
Vanessa
Product Manager

Large Gallery

Content Database

Medium Gallery

Content Database

Small Gallery

Content Database

List

Content Database

Oral Genealogies App
The FamilySearch Oral Genealogies app makes it easy to capture family histories anywhere you can take a phone. Interview and gather information about families and tribes to preserve them for generations.
January 28, 2022
FamilySearchFigmaAndroid
Revist
HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.
January 3, 2022
FigmaTailwindCSSReact
Get Involved
HTML and CSS may define the structure of a web application, respectively, but JavaScript is the soul.
January 28, 2022
FamilySearchFigmaiOSAndroid

Image block
Image block

Bookmark block