Columns

Column blocks create side-by-side layouts for content.

Two Columns

Left Column

This content appears on the left side. Columns are great for:

• Comparing features
• Showing before/after
• Side-by-side code examples

Right Column

This content appears on the right side. The columns stack on mobile for better responsiveness.

Columns with Code

Input

{
  "name": "John",
  "age": 30
}

Output

{
  "success": true,
  "data": {
    "name": "John",
    "age": 30
  }
}

Syntax

{% columns %}
{% column %}
Left column content
{% endcolumn %}

{% column %}
Right column content
{% endcolumn %}
{% endcolumns %}

Use Cases

• Feature comparisons
• Before/after examples
• Input/output demonstrations
• Parallel information display