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
| No data |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| button_color | TEXT |
Optional color for the button. | |
| button_text | TEXT |
Text for the button. | |
| description | TEXT |
A brief description of the item. | |
| description_md | TEXT |
A brief description of the item, formatted using markdown. | |
| icon | Optional icon to display in a ribbon. | ||
| icon_color | TEXT |
Color for the icon in the ribbon. | |
| item | JSON |
A list of bullet points associated with the columns, represented either as text, or as a json object with "icon", "color", and "description" or "description_md" fields. | |
| link | TEXT |
A link associated with the item. | |
| size | INTEGER |
Size of the column, affecting layout. | |
| small_text | TEXT |
Optional small text to display after the value. | |
| target | TEXT |
Optional target for the button. Set to "_blank" to open links in a new tab. | |
| title | TEXT |
The title or label for the item. | |
| value | TEXT |
The value associated with the item. | |
| value_color | TEXT |
Color for the value text. |
Example 1
Pricing Plans Display
select
'columns' as component;
select
'Start Plan' as title,
'€18' as value,
'Perfect for testing and small-scale projects' as description,
'128MB Database' as item,
'SQLPage hosting' as item,
'Community support' as item,
'https://datapage.app' as link,
'Start Free Trial' as button_text,
'/month' as small_text;
select
'Pro Plan' as title,
'€40' as value,
'rocket' as icon,
'For growing projects needing enhanced features' as description,
JSON('{"icon":"database","color":"blue","description":"1GB Database"}') as item,
JSON('{"icon":"headset","color":"green","description":"Priority Support"}') as item,
JSON('{"icon":"world","color":"purple","description":"Custom Domain"}') as item,
'https://datapage.app' as link,
'Start Free Trial' as button_text,
'indigo' as button_color,
'indigo' as value_color,
'/month' as small_text;
select
'Enterprise Plan' as title,
'€600' as value,
'building-skyscraper' as icon,
'For large-scale operations with custom needs' as description,
JSON('{"icon":"database-plus","description_md":"**Custom Database Scaling**"}') as item,
JSON('{"icon":"shield-lock","description_md":"**Enterprise Auth** with Single Sign-On"}') as item,
JSON('{"icon":"headset","description_md":"**Monthly** Expert Support time"}') as item,
JSON('{"icon":"file-certificate","description_md":"**SLA** with guaranteed uptime"}') as item,
'mailto:[email protected]' as link,
'Contact Us' as button_text,
'/month' as small_text,
'_blank' as target;Result
Start Plan
€18 /month
- Perfect for testing and small-scale projects
- 128MB Database
- SQLPage hosting
- Community support
Pro Plan
€40 /month
- For growing projects needing enhanced features
-
1GB Database
-
Priority Support
-
Custom Domain
Enterprise Plan
€600 /month
- For large-scale operations with custom needs
-
Custom Database Scaling
-
Enterprise Auth with Single Sign-On
-
Monthly Expert Support time
-
SLA with guaranteed uptime
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