Skip to main content
The columns component creates a flexible grid layout to display content in columns. Each column can contain cards with icons, titles, descriptions, values, and buttons.

​
Basic Usage

SELECT 'columns' AS component;
SELECT 'Column 1' AS title, 'First column content' AS description;
SELECT 'Column 2' AS title, 'Second column content' AS description;

​
Top-Level Properties

The columns component does not have specific top-level properties. Each row defines a column in the grid.

​
Column Properties

​
title
text
required
Column heading displayed at the top
​
description
text
Plain text content of the column
​
description_md
text
Markdown-formatted content with bold, italics, links
​
icon
icon
Icon displayed in a ribbon at the top corner (from tabler-icons.io)
​
icon_color
color
default:"green"
Color of the icon ribbon
​
value
text
Large prominent value displayed in the column
​
value_color
color
Color of the value text
​
small_text
text
Small text displayed next to the value
​
size
integer
default:"3"
Column width from 1-12. Default 3 means 4 columns per row. Use 6 for 2 columns, 4 for 3 columns, etc.
​
item
json
Array of list items to display in the column. Each item can have icon, color, link, and description.
​
button_text
text
Text for a button at the bottom of the column
​
link
url
URL for the button to navigate to
​
button_color
color
Color of the button
​
target
text
Where to open the button link: _blank (new tab), _self (same tab)

​
Examples

​
Basic Columns

SELECT 'columns' AS component;

SELECT 'Features' AS title,
       'All the features you need' AS description;

SELECT 'Performance' AS title,
       'Lightning fast queries' AS description;

SELECT 'Security' AS title,
       'Enterprise-grade protection' AS description;

​
Columns with Icons

SELECT 'columns' AS component;

SELECT 'Speed' AS title,
       'bolt' AS icon,
       'blue' AS icon_color,
       'Optimized for performance' AS description;

SELECT 'Security' AS title,
       'lock' AS icon,
       'red' AS icon_color,
       'Your data is safe with us' AS description;

SELECT 'Support' AS title,
       'headset' AS icon,
       'green' AS icon_color,
       'We are here to help' AS description;

​
Columns with Values

SELECT 'columns' AS component;

SELECT 'Users' AS title,
       '1,234' AS value,
       'active users' AS small_text,
       'Total registered users' AS description;

SELECT 'Revenue' AS title,
       '$56,789' AS value,
       'blue' AS value_color,
       'per month' AS small_text,
       'Monthly recurring revenue' AS description;

SELECT 'Growth' AS title,
       '+23%' AS value,
       'green' AS value_color,
       'this month' AS small_text,
       'User growth rate' AS description;

​
Columns with List Items

SELECT 'columns' AS component;

SELECT 'Basic Plan' AS title,
       '$9' AS value,
       '/month' AS small_text,
       json('[
           {"description": "5 GB Storage"},
           {"description": "10 Users"},
           {"description": "Email Support"}
       ]') AS item,
       'Subscribe' AS button_text,
       'subscribe.sql?plan=basic' AS link,
       'primary' AS button_color;

SELECT 'Pro Plan' AS title,
       '$29' AS value,
       '/month' AS small_text,
       json('[
           {"description": "50 GB Storage"},
           {"description": "Unlimited Users"},
           {"description": "Priority Support"}
       ]') AS item,
       'Subscribe' AS button_text,
       'subscribe.sql?plan=pro' AS link,
       'success' AS button_color;

​
Columns with Icons in List Items

SELECT 'columns' AS component;

SELECT 'Enterprise' AS title,
       'rocket' AS icon,
       'purple' AS icon_color,
       'Complete solution for large teams' AS description,
       json('[
           {"icon": "check", "color": "green", "description": "Unlimited Storage"},
           {"icon": "check", "color": "green", "description": "Custom Integrations"},
           {"icon": "check", "color": "green", "description": "Dedicated Support"},
           {"icon": "phone", "color": "blue", "link": "tel:+1234567890", "description": "Call us for pricing"}
       ]') AS item;

​
Two-Column Layout

SELECT 'columns' AS component;

SELECT 'About Us' AS title,
       6 AS size,
       'We are a team of passionate developers...' AS description_md;

SELECT 'Contact' AS title,
       6 AS size,
       '**Email**: [email protected]\n\n**Phone**: +1 234 567 890' AS description_md;

​
Full-Width Column

SELECT 'columns' AS component;

SELECT 'Announcement' AS title,
       12 AS size,
       'banner' AS icon,
       'This is a full-width announcement that spans the entire page.' AS description;

​
Pricing Table

SELECT 'columns' AS component;

SELECT 'Free' AS title,
       4 AS size,
       '$0' AS value,
       'green' AS value_color,
       '/month' AS small_text,
       'Perfect for getting started' AS description,
       json('[{"description": "1 GB Storage"}, {"description": "5 Users"}]') AS item,
       'Get Started' AS button_text,
       'signup.sql?plan=free' AS link;

SELECT 'Starter' AS title,
       4 AS size,
       '$19' AS value,
       'blue' AS value_color,
       '/month' AS small_text,
       'For small teams' AS description,
       json('[{"description": "10 GB Storage"}, {"description": "25 Users"}]') AS item,
       'Subscribe' AS button_text,
       'signup.sql?plan=starter' AS link,
       'primary' AS button_color;

SELECT 'Business' AS title,
       4 AS size,
       '$49' AS value,
       'purple' AS value_color,
       '/month' AS small_text,
       'For growing businesses' AS description,
       json('[{"description": "100 GB Storage"}, {"description": "Unlimited Users"}]') AS item,
       'Subscribe' AS button_text,
       'signup.sql?plan=business' AS link,
       'success' AS button_color;

​
Statistics Dashboard

SELECT 'columns' AS component;

SELECT 'Total Sales' AS title,
       'chart-line' AS icon,
       'green' AS icon_color,
       '$' || CAST(SUM(amount) AS TEXT) AS value,
       'green' AS value_color,
       'This month' AS small_text
FROM sales
WHERE sale_date >= date('now', 'start of month');

SELECT 'Orders' AS title,
       'shopping-cart' AS icon,
       'blue' AS icon_color,
       CAST(COUNT(*) AS TEXT) AS value,
       'blue' AS value_color,
       'Today' AS small_text
FROM orders
WHERE order_date = date('now');

SELECT 'Customers' AS title,
       'users' AS icon,
       'purple' AS icon_color,
       CAST(COUNT(*) AS TEXT) AS value,
       'purple' AS value_color,
       'Active' AS small_text
FROM customers
WHERE status = 'active';

SELECT 'Products' AS title,
       'package' AS icon,
       'orange' AS icon_color,
       CAST(COUNT(*) AS TEXT) AS value,
       'orange' AS value_color,
       'In stock' AS small_text
FROM products
WHERE stock > 0;

​
Column Width Guide

  • size=12: Full width (1 column per row)
  • size=6: Half width (2 columns per row)
  • size=4: Third width (3 columns per row)
  • size=3: Quarter width (4 columns per row)
  • size=2: Sixth width (6 columns per row)
Columns automatically wrap to new lines and adjust to screen size on mobile devices.

​
Use Cases

  • Feature highlights
  • Pricing tables
  • Statistics dashboards
  • Service listings
  • Product comparisons
  • Team member profiles
  • Benefit lists
  • card - For more complex card layouts
  • datagrid - For key-value data display
  • big-number - For prominent statistics

Build docs developers (and LLMs) love

Get started for freeTalk to us