Note Styleguide

This styleguide demonstrates how all key Markdown/MDX features, Astro components, and prose styles render in a Note context. Use it to check typography, component appearance, and real-world content. For a full component reference, see the main styleguide.

URL Cards & Embeds

We need more calm companies justinjackson.ca

Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven.

The AI workspace that works for you. | Notion notion.so

A tool that connects everyday work into one space. It gives you and your teams AI tools—search, writing, note-taking—inside an all-in-one, flexible workspace.

Callout Examples

✅

Success

This is a green success callout. Perfect for confirmation messages and positive feedback.

// It can even contain code blocks!
const success = true;
console.log('Operation completed successfully');

📚

Comprehensive Example

This callout demonstrates all the markdown features that work inside callouts: Text formatting: We can use bold, italic, and inline code. Lists work great:

Unordered lists
With links
And formatting Numbered lists too:

First item
Second item with code
Third item with emphasis Blockquotes:

This is a blockquote inside a callout. It maintains proper styling and can include bold text and links. Code blocks:

function example() {
  return "Code blocks work perfectly!";
}

Links: Both external links and internal references work seamlessly.

Headings

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Text Styles & Lists

Here’s some bold text, italic text, inline code, and a link.

Unordered list item
Another item with bold
Italic item
Code item
Link item

Ordered list item
Another item with bold
Italic item
Code item
Link item

This is a blockquote. It should have a nice left border and italic styling.

// Code block example
const foo = 'bar';
console.log(foo);

Test Image

Here’s a paragraph with bold text, italic text, code, and a link. We can also have:

Lists with bold text
Lists with italic text
Lists with code
Lists with links

And blockquotes with bold text, italic text, code, and links.

Table Example

Name	Role	Notes
Alice	Designer	Likes Figma
Bob	Developer	Typescript fan
Carol	Writer	Markdown wizard

Long-Form Content Example

The Art of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning).

The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers.

Back to Main Styleguide