Note Styleguide

components typography design testing css

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 .

Accordion

Collapsible Note Section

Perfect for organizing supplementary information in notes. This accordion contains:

Quick facts that don’t need to be immediately visible
Reference links and resources
Technical details or implementation notes
Optional reading materials

Great for keeping notes concise while providing depth when needed.

Usage in Notes

Use accordions in notes to:

Hide lengthy technical details
Organize optional context
Provide expandable examples
Keep the main content focused

<Accordion header="Details">Hidden content here...</Accordion>

Plain Accordion

This is a plain accordion with no background or border - it blends seamlessly into the content.

URL Cards & Embeds

justinjackson.ca We need more calm companies

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

dannysmith.notion.site The AI workspace that works for you. | Notion

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.

Button Links

Primary Button

Secondary Button

Callout Examples

✅

Success

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

completed successfully'); ```
</Callout>

<Callout emoji="🔥" type="orange" title="Hot Tip">
This is an orange callout. Great for highlighting important tips or featured content with _italic
emphasis_.
</Callout>

<Callout emoji="💭" type="blue">
This callout has no title, just an icon and content with **markdown formatting** and
[links](https://example.com).
</Callout>

<Callout emoji="📚" type="blue" title="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](https://example.com)
- And **formatting**
**Numbered lists too**:
1. First item
2. Second item with `code`
3. Third item with _emphasis_
**Blockquotes**:
> This is a blockquote inside a callout. It maintains proper styling and can include **bold text** and [links](https://example.com).
**Code blocks**:
```javascript
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

Blockquotes with Citations

This is a basic blockquote without citation styling.

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

The best way to find out if you can trust somebody is to trust them.

— Ernest Hemingway - A Moveable Feast

Typography is the craft of endowing human language with a durable visual form.

— Robert Bringhurst - The Elements of Typographic Style

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);

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 .

Mermaid Diagrams

Flowchart

Sequence Diagram

Gantt Chart

Class Diagram

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

copy / view as markdown