1 of 26

Blocks

Code

Code block with lines and no wrapping

function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        <span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            <span className="flex-1">
                <CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers && line.tokens.length === 0 && 0 ? (
                    <span className="ew">{'\u200B'}</span>
                ) : (
                    '\n'
                )}
            </span>
        </span>
    );
}

Code block with line numbers and wrapping

function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        <span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            <span className="flex-1">
                <CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers && line.tokens.length === 0 && 0 ? (
                    <span className="ew">{'\u200B'}</span>
                ) : (
                    '\n'
                )}
            </span>
        </span>
    );
}

Code block with wrapping but no line numbers

Code block with full-width option

Annotations

This paragraph contains an . It can be opened by clicking it.

In codeblocks

Tabs

A single tab:

Tab with content:

Hints

Colors

Info hints are great for showing general information, or providing tips and tricks.

Success hints are good for showing positive actions or achievements.

Warning hints are good for showing important information or non-critical warnings.

Danger hints are good for highlighting destructive actions or raising attention to critical information.

With blocks in it

First paragraph

Second paragraph

List item
Second list item

With a divider:

After the divider

Integrations

A mermaid block:

A GitHub file:

A linear issue

A mailchimp block

Tables

Basic text table

With header

Cards

2 basic cards with text:

Cards with cover

Cards with centered text and images

Cards with different column types

Cards full-width

Cards with different column types and headers

Headings

Heading 1

Heading 2

Expandables

Empty

This is an empty expandable (body)

Inline Images

his paragraph contains inline images, this first one was using the "original" size, and then this one is using the line size.

This image has intrinsic 400px width, but renders as 300px:

Some customers add Cards with inline images instead of Cover images. When they do, we should still respect the 300px width despite the Card being under 250px. The contents of the images should be centered.

Finally, we should make sure to render tiny inline images correctly:

11x11

16x16

22x22

Block Images

Large image

Alignment

Image centered:

An image on the left:

An image on the right:

Alignment with caption

Image centered:

An image on the left:

An image on the right:

Marks

The following text is bold and italic. Styles can also be ~~combined~~.

Keyboard maks X + ~~Y~~ + Ctrl + ⌘

Other styles includes code text and colored text.

And super^script and sub_script.

Colors

Text colors:

Purple
Blue
Red
Orange

Background colors:

Purple
Blue
Red
Orange

Combined:

Purple
Blue
Red
Orange

Emojis

This text contains some 😇 emojis!!

Emojis can also be used in 🎉 headings!

Diversity: 👩

And other emojis: man detective🕵️, women detective🕵️‍♀️

Icons

This text contains some icons!!

Icons can also be used in headings!

Buttons

Some text with a button Primary button and Secondary

2 buttons next to each other: Button 1Button 2

With text alignment

Centeted:

New button

On the right:

New button

With icon

A button with an icon:

Page links

Link to another page

Link to a file

Link to another space

Link to a private space

API blocks

A first block:

Webhooks :

Models:

Math

A math block that should render with KaTeX:

A math block that should be rendered with MathJax:

A math inline with KaTex: and one with MathJax

Another one with MathJax:

And a bigger one with KaTeX:

Long inline math

Files

File blocks reference a file and are used to help users download specific files.

20KB

openapi.yaml

454KB

Screenshot 2024-02-16 at 10.54.58.png

image

File blocks can also have a caption:

Embeds

Embed as a card, handled by an integration:

Embed as a card, not handled by an integration

Embed of a youtube video

Embed with a caption

Embed full-width

Lists

Unordered list

First item
Second item

Stepper

First step

Content of the step

With another line, and an image

Second step

This is the second step

This is the first step

And it's good!

Columns

Left hand side!

Right hand side!

Test different widths