1 of 26

Blocks

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
And with a link !

With a divider:

After the divider

Tables

Basic text table

With header

With header hidden

With resized column (B being larger)

With text alignment (A to the right, B centered, C to the left)

Pasted right-aligned paragraph

Tables with different column types

Some intro text

A short oneA tag that is quite longAnother one

Short intro text

A short one

Another text

Another one

Table with full-width

Table with ratings

Rating A

Rating B

Table with files

Table with checkbox

Checkbox

Checked

Not checked

Checked

Table with content references

Headings

Heading 1

Heading 2

Heading 3

Title 1

Title 2

Title 3

Heading centered

This text is also centered

Heading on the right

This text is also right

Inline Images

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:

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 superscript and subscript.

Colors

Text colors:

Purple
Blue
Red
Orange
Yellow
Green

Background colors:

Purple
Blue
Red
Orange
Yellow
Green

Combined:

Purple
Blue
Red
Orange
Yellow
Green

Icons

Buttons

With text alignment

Centeted:

On the right:

With 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:

σ_{i,BTC} =min($9600,\text{ } $2500)

Another one with MathJax:

\text{Hourly Funding Payment} = \text{Position Notional Value} \times \text{Funding Rate}\

And a bigger one with KaTeX:

Lists

Unordered list

First item
Second item
- First nested item
  - Second nested item
Third item

Ordered list

First item
Second item
1. First nested item
  1. Second nested item
Third item

Tasks

Task 1
Task 2, done

Mix

Ordered list item
- Unordered list item

UL With blocks

List item starting with a heading
A paragraph below it.
Text before code block
```
code block
a second line
```
```
Directly, a code block
```

OL With blocks

List item starting with a heading
A paragraph below it.
Text before code block
```
code block
a second line
```
```
Directly, a code block
```

Tasks With blocks

List item starting with a heading
A paragraph below it.
Text before code block
```
code block
a second line
```
```
Directly, a code block
```

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

Tables

Basic text table

With header

With header hidden

With resized column (B being larger)

With text alignment (A to the right, B centered, C to the left)

Pasted right-aligned paragraph

Tables with different column types

Some intro text

A short oneA tag that is quite longAnother one

Short intro text

A short one

Another text

Another one

Table with full-width

Table with ratings

Rating A

Rating B

Table with files

An image file

An openAPI file

No file

Table with checkbox

Checkbox

Checked

Not checked

Checked

Table with content references

Link

Page

Text page

Page with emoji

Page with icon

Math

A math block that should render with KaTeX:

f(x) = x * e^{2 pi i \xi x}

A math block that should be rendered with MathJax:

σ_{i,BTC} =min($9600,\text{ } $2500)

A math inline with KaTex: $f(x) = x * e^{2 pi i \xi x}$ and one with MathJax σ_{i,BTC} =min($9600,\text{ } $2500)

Another one with MathJax:

\text{Hourly Funding Payment} = \text{Position Notional Value} \times \text{Funding Rate}\

And a bigger one with KaTeX:

\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Long inline math $\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$

Blocks

Hints

Colors

With blocks in it

Tables

Headings