The columns component
A component to display various items in a card layout, allowing users to choose options. Useful for showcasing different features or services, or KPIs. See also the big_number component.
Introduced in SQLPage v0.29.0.
Top-level parameters
Row-level parameters
button_color
Optional color for the button.
button_text
Text for the button.
description
A brief description of the item.
description_md
A brief description of the item, formatted using markdown.
icon
Optional icon to display in a ribbon.
icon_color
Color for the icon in the ribbon.
item
A list of bullet points associated with the columns, represented as JSON.
link
A link associated with the item.
size
Size of the column, affecting layout.
small_text
Optional small text to display after the value.
title
The title or label for the item.
value
The value associated with the item.
value_color
Color for the value text.
Example 1
Pricing Plans Display
select
'columns' as component;
select
'Basic Plan' as title,
'$0' as value,
'A basic plan for individuals.' as description,
JSON('{"description":"Creation & Edition"}') as item,
JSON('{"description":"Limited Customization"}') as item,
'#' as link,
'Select' as button_text,
'/month' as small_text;
select
'Standard Plan' as title,
'$49' as value,
'star' as icon,
'A standard plan for small teams.' as description,
JSON('{"icon":"check","color":"green","description":"Collaboration Tools"}') as item,
JSON('{"icon":"check","color":"green","description":"Custom data sources"}') as item,
JSON('{"icon":"x","color":"red","description":"Priority support"}') as item,
'#' as link,
'Select' as button_text,
'success' as button_color,
'green' as value_color,
'/month' as small_text;
select
'Premium Plan' as title,
'$99' as value,
'A premium plan for larger teams.' as description,
JSON('{"icon":"check","color":"green","description":"Collaboration Tools"}') as item,
JSON('{"icon":"check","color":"green","description":"Custom data sources"}') as item,
JSON('{"icon":"check","color":"green","description":"Priority support"}') as item,
'#' as link,
'Select' as button_text,
'/month' as small_text;Result
Basic Plan
$0 /month
- A basic plan for individuals.
- Creation & Edition
- Limited Customization
Standard Plan
$49 /month
- A standard plan for small teams.
- Collaboration Tools
- Custom data sources
- Priority support
Premium Plan
$99 /month
- A premium plan for larger teams.
- Collaboration Tools
- Custom data sources
- Priority support
Example 2
Tech Company KPIs Display
select
'columns' as component;
select
'Monthly Active Users' as title,
'10k' as value,
'blue' as value_color,
4 as size,
'Total active users this month, showcasing user engagement.' as description,
JSON('{"icon":"target","description":"Target: 12,000"}') as item,
'#' as link,
'User Activity Overview' as button_text,
'info' as button_color;
select
'Revenue' as title,
'$49k' as value,
'blue' as value_color,
4 as size,
'Total revenue generated this month, indicating financial performance.' as description,
JSON('{"icon":"trending-down","color":"red","description":"down from $51k last month"}') as item,
'#' as link,
'Financial Dashboard' as button_text,
'info' as button_color;
select
'Customer Satisfaction' as title,
'94%' as value,
'blue' as value_color,
4 as size,
'Percentage of satisfied customers, reflecting service quality.' as description,
JSON('{"icon":"trending-up","color":"green","description":"+ 2% this month"}') as item,
'#' as link,
'Open Google Ratings' as button_text,
'info' as button_color;Result
Monthly Active Users
10k
- Total active users this month, showcasing user engagement.
- Target: 12,000
Revenue
$49k
- Total revenue generated this month, indicating financial performance.
- down from $51k last month
Customer Satisfaction
94%
- Percentage of satisfied customers, reflecting service quality.
- + 2% this month