Typography & Rich Text

The rich-paragraph block supports inline Markdown. Use it for body copy that needs emphasis without dedicated block styling.

Bold text draws attention to key terms. Italic adds nuance or introduces foreign words. Bold and italic together signal the highest inline emphasis.

Strikethrough marks deprecated or removed content. inline code displays short snippets, commands, or variable names inside prose.

Links are written as display text. They render as styled anchors — useful for referencing external resources or citations.

Alternative Markdown syntax also works: bold with underscores, italic with underscores. Both styles are equivalent to their asterisk counterparts (via remark-gfm).

Escape characters when you need a literal symbol: *not italic*, `not code`, [not a link]. The backslash prevents Markdown parsing.

Heading Level 1

Level 1 is the main section title. Use it once per section, at the very top.

Heading Level 2

Level 2 introduces a subsection within a section. It may appear multiple times per page.

Heading Level 3

Level 3 is the finest subdivision — useful for named concepts, examples, or grouped items inside a subsection.

Callout Blocks

Callout blocks interrupt the reading flow to signal additional context (note) or risk (warning). Both accept an optional label that appears as an uppercase tag above the message.

Lists

Bullet List

The list block renders a classic bulleted list. Each item supports inline Markdown (bold, italic, code, links, strikethrough). Use this for unordered enumerations where sequence does not matter.

• First item in the list
• Second item — a bit longer to show line wrapping behaviour inside the bullet
• Third item
• Fourth item with bold and italic — inline Markdown works inside list items
• Fifth item — last in the set

Item List (Grid)

The item-list block renders items in a two-column grid with a small accent dot. Both the label and each item support inline Markdown. Use it for dense, scannable sets of facts, features, or attributes where each item is short.

Numbered Steps

The steps block renders a numbered sequence with large, accent-coloured numerals. Both the label and each step support inline Markdown. Use it when order matters — installation instructions, workflows, recipes, or any sequential process.

Visual Content Blocks

Highlight

The highlight block is a large pull-quote styled element — typically used for key takeaways, statistics, or short phrases that should stand out from the surrounding body text.

Quote

The quote block renders a left-bordered, italicised block quote. Use it for attributable quotes from authors, researchers, or personas.

Any sufficiently advanced technology is indistinguishable from magic. — Arthur C. Clarke

First, solve the problem. Then, write the code. — John Johnson

Image with Caption

The image-with-caption block renders a full-width image with an optional italic caption below. The block is treated as an atomic unit — it will never be split across pages.

Code & Table

Code Block

The code block renders a monospaced, pre-formatted block with a subtle background. Use it for multi-line code samples, configuration files, or shell commands.

// Minimal ebook definition
import type { Ebook } from "@/ebook-engine/types/ebook";

export const myEbook: Ebook = {
  id: "my-ebook",
  title: "My First Ebook",
  author: "Your Name",
  cover: {
    layout: "centered",
    background: { variant: "wave-cover" },
    textColor: "#ffffff",
  },
  sections: [
    {
      id: "intro",
      title: "Introduction",
      blocks: [
        { type: "heading", level: 1, content: "Hello, World!" },
        { type: "rich-paragraph", content: "Your content goes here." },
      ],
    },
  ],
};

Table

The table block renders structured tabular data with a styled header row, zebra-striped rows, and an optional caption. All values are plain strings.

Action Box & Utility Blocks

Action Box

The action-box block is a dark, centered message card used to highlight an action or suggestion — such as a next step, a share prompt, or a key takeaway. It supports an optional label above the main message.

Divider

The divider block renders a subtle horizontal rule. Use it to visually separate unrelated groups of blocks within the same section.

Content below the divider continues in the same section but signals a thematic break to the reader.

Page Break

The page-break block forces the pagination engine to start a new page at that exact point, regardless of how much space remains. The content below continues on the next page.

This paragraph is on the current page. The next paragraph will appear on a new page because a page-break follows.