Ascend Documentation

Appearance

Working with Blocks ​

Master the building blocks of your content - learn about all 12 block types and how to use them effectively.

What Are Blocks? ​

Blocks are the fundamental content units in pages. Each piece of content (paragraph, heading, image, etc.) is a separate block that you can:

  • ✏️ Edit independently
  • ↕️ Reorder by dragging
  • 📋 Duplicate
  • 🗑️ Delete

Think of blocks like LEGO pieces - mix and match to build exactly what you need!

The 12 Block Types ​

1. 📝 Paragraph (Text) ​

Use for: Regular body text, explanations, descriptions

Features:

  • Default block type
  • Supports inline formatting
  • Auto-wraps text

How to add:

  • Click "Text" button
  • Start typing in empty block
  • Press Enter after any block

Example:

This is a regular paragraph of text. It can contain
multiple lines and will wrap automatically.

2. 📌 Heading 1 (H1) ​

Use for: Main page sections, top-level titles

Features:

  • Largest heading size
  • Bold, prominent
  • One per major section

How to add:

  • Click "H1" button
  • Type # + text (markdown)
  • Use slash menu: /h1

Example:

# Introduction to Our Product

Rendered:

Introduction to Our Product ​

3. 📌 Heading 2 (H2) ​

Use for: Subsections, secondary headers

Features:

  • Medium heading size
  • Creates hierarchy
  • Common for section breaks

How to add:

  • Click "H2" button
  • Type ## + text
  • Use slash menu: /h2

Example:

## Features Overview

Rendered:

Features Overview ​

4. 📌 Heading 3 (H3) ​

Use for: Sub-subsections, detailed breakdowns

Features:

  • Smaller heading
  • Third level of hierarchy
  • Great for detailed docs

How to add:

  • Click "H3" button
  • Type ### + text
  • Use slash menu: /h3

Example:

### Installation Steps

Rendered:

Installation Steps ​

5. • Bulleted List ​

Use for: Unordered lists, features, options

Features:

  • Bullet point marker
  • No specific order
  • Easy to scan

How to add:

  • Click "Bulleted" button
  • Type - + text
  • Use slash menu: /bullet

Example:

- Feature one
- Feature two  
- Feature three

Rendered:

  • Feature one
  • Feature two
  • Feature three

6. 1. Numbered List ​

Use for: Sequential steps, ordered items, rankings

Features:

  • Automatic numbering
  • Shows order/priority
  • Great for instructions

How to add:

  • Click "Numbered" button
  • Type 1. + text
  • Use slash menu: /number

Example:

1. First step
2. Second step
3. Third step

Rendered:

  1. First step
  2. Second step
  3. Third step

7. ☑️ Todo / Checkbox ​

Use for: Task lists, checklists, action items

Features:

  • Interactive checkbox
  • Click to toggle complete
  • Shows checked state
  • Strikethrough when done

How to add:

  • Click "Todo" button
  • Type [] + text
  • Use slash menu: /todo

Example:

☐ Incomplete task
☑ Completed task

Usage:

  • Click checkbox to toggle
  • Checked items get strikethrough
  • Perfect for meeting action items

8. 💡 Callout ​

Use for: Important notes, warnings, tips

Features:

  • Highlighted background
  • Stands out visually
  • Great for emphasis

How to add:

  • Click "Callout" button
  • Use slash menu: /callout

Example:

Note: This is important information that should stand out from regular text.

When to use:

  • ⚠️ Warnings or alerts
  • 💡 Tips and tricks
  • ℹ️ Important notes
  • ✨ Key takeaways

9. ➖ Divider ​

Use for: Section breaks, visual separation

Features:

  • Horizontal line
  • No text content
  • Creates clear breaks

How to add:

  • Click "Divider" button
  • Type --- on empty line
  • Use slash menu: /divider

Example:

Content above
---
Content below

Rendered:

Content above

Content below

10. 💬 Quote ​

Use for: Citations, testimonials, emphasized text

Features:

  • Indented with left border
  • Italic styling
  • Clearly distinct from body text

How to add:

  • Click "Quote" button
  • Type > + text
  • Use slash menu: /quote

Example:

> "The best way to predict the future is to invent it."
> — Alan Kay

Rendered:

"The best way to predict the future is to invent it." — Alan Kay

11. 💻 Code Block ​

Use for: Code snippets, technical examples, terminal output

Features:

  • Monospace font
  • Syntax highlighting
  • Language selector
  • Copy button for easy copying
  • Dark background

How to add:

  • Click "Code" button
  • Type ``` ` on empty line
  • Use slash menu: /code

Features:

  1. Language field: Specify syntax (e.g., "typescript", "python")
  2. Copy button: One-click copy to clipboard
  3. Preserved formatting: Maintains indentation and spacing

Example:

typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}

Supported languages: JavaScript, TypeScript, Python, Java, Go, Rust, etc.

12. 🖼️ Image ​

Use for: Screenshots, diagrams, photos, illustrations

Features:

  • Upload from computer
  • Preview display
  • Caption field
  • Auto-resized to fit
  • Antivirus scan on upload

How to add:

  • Click "Image" button
  • Use slash menu: /image
  • Click "Upload image" in block

Fields:

  1. Image: Click to upload file
  2. Caption: Optional description text
  3. URL: Displays once uploaded

Supported formats: JPG, PNG, GIF, WebP

File size: Check with your admin for limits

Block Operations ​

Adding Blocks ​

Method 1: Toolbar

  • Click any button in the block toolbar

Method 2: Enter Key

  • Press Enter at end of block
  • Creates new paragraph below

Method 3: Slash Menu

  • Type / in empty block
  • Search and select block type

Method 4: Markdown Shortcuts

  • Type shortcut + space (e.g., # for H1)

Learn more about shortcuts

Reordering Blocks ​

Method 1: Drag & Drop

  1. Hover over block
  2. Grab drag handle (⋮⋮) on left
  3. Drag to new position
  4. Drop when highlight appears

Method 2: Move Buttons

  • Click ↑ to move up
  • Click ↓ to move down

Method 3: Keyboard

  • Cmd/Ctrl + Shift + ↑ Move up
  • Cmd/Ctrl + Shift + ↓ Move down

Duplicating Blocks ​

Quickly copy a block with all its content:

  1. Hover over the block
  2. Click the Duplicate button (📋)
  3. Copy appears immediately below
  4. Edit as needed

Useful for:

  • Template sections
  • Repeated structures
  • Quick starting points

Deleting Blocks ​

Method 1: Delete Button

  1. Hover over block
  2. Click 🗑️ Remove block

Method 2: Keyboard

  • Backspace on empty block
  • Cmd/Ctrl + Backspace to force delete

Note: Deleted blocks are gone immediately. Use Undo if needed!

Block Formatting ​

Each text-based block supports:

  • Bold (**text** or Cmd/Ctrl+B)
  • Italic (*text* or Cmd/Ctrl+I)
  • Underline (__text__ or Cmd/Ctrl+U)
  • Strikethrough (~~text~~)
  • Inline code (`text`)
  • Links (select text, click link icon)

Learn more about formatting

Best Practices ​

Structure Your Content ​

✅ Good Structure:
# Main Title (H1)
Intro paragraph

## Section (H2)
Content paragraph

### Subsection (H3)
Details
❌ Poor Structure:
### Random heading
# Another heading
## Back to H2
Confusing!

Use the Right Block Type ​

ContentBest Block Type
Body textParagraph
Section titleHeading 2
List of itemsBulleted or Numbered
Action itemsTodo
Important noteCallout
CodeCode block
Break between sectionsDivider

Keep Blocks Focused ​

✅ Do: One idea per block

## Overview
Product helps teams collaborate.

## Features  
- Real-time editing
- Comments

❌ Don't: Mix multiple concepts

## Overview
Product helps teams collaborate. Features include real-time 
editing and comments. It's great for remote teams. 
Pricing starts at $10...

Common Workflows ​

Creating a Document ​

  1. Start with H1 for title
  2. Add intro paragraph
  3. Use H2 for each main section
  4. Add content blocks (text, lists, images)
  5. Use dividers between major sections
  6. Add callouts for important notes

Building a Task List ​

  1. Add H2 heading for category
  2. Add todo blocks for each task
  3. Group related tasks under H3 headings
  4. Click checkboxes as you complete
  5. Duplicate structure for next sprint

Writing Technical Docs ​

  1. H1 for page title
  2. Intro paragraph
  3. H2 "Installation"
    • Numbered list for steps
    • Code blocks for commands
  4. H2 "Configuration"
    • Bulleted list for options
    • Code blocks for examples
  5. H2 "Troubleshooting"
    • Callouts for warnings

Keyboard Shortcuts ​

ActionShortcut
Add blockEnter
Delete empty blockBackspace
Move block upCmd/Ctrl+Shift+↑
Move block downCmd/Ctrl+Shift+↓
Duplicate blockClick 📋 button
Open slash menu/

Full shortcuts list

Troubleshooting ​

Can't add blocks? ​

Check: Are you in Edit mode? Solution: Toggle to Edit mode

Drag not working? ​

Check: Hover over block to see handle Solution: Click and hold ⋮⋮ handle before dragging

Lost a block? ​

Solution: Press Cmd/Ctrl+Z to undo

Related Guides: