The card component creates a responsive grid where each element is a card that displays data. Cards automatically adjust to screen size and can include images, rich text, icons, and embedded content.
Basic Usage
SELECT 'card' AS component;
SELECT 'My Card' AS title, 'This is the card body' AS description;
Top-Level Properties
Text header at the top of the card grid
A short paragraph displayed below the title
A short paragraph below the title, formatted using Markdown
Number of columns in the grid. This is a hint - the grid adjusts dynamically to screen size.
Item Properties
Name of the card, displayed at the top
The body of the card (plain text only)
The body of the card in Markdown format with bold, italics, links, 
, etc. URL of an image to display at the top of the card
Muted text to display at the bottom of the card
Muted text at the bottom, formatted using Markdown
URL to navigate to when the card is clicked
URL to navigate to when the footer is clicked
Color displayed on the left side to highlight the card
Background color of the card
Whether this card is “active” (displayed more prominently)
Card width from 1 (smallest) to 12 (full-width). Default is 3 (4 cards per line).
URL whose contents will be fetched and injected into the card. Use ?_sqlpage_embed for SQLPage files.
Set to ‘iframe’ to embed in an iframe instead of fetching content
Inline CSS styles for iframe embeds (e.g., “background-color: #FFFFFF”)
Examples
Simple Cards
SELECT 'card' AS component,
'Popular SQLPage features' AS title,
2 AS columns;
SELECT
'Download as spreadsheet' AS title,
'?component=csv#component' AS link,
'Using the CSV component, you can download your data as a spreadsheet.' AS description,
'file-plus' AS icon,
'green' AS color,
'SQLPage can both [read](?component=form) and [write](?component=csv) **CSV** files.' AS footer_md;
SELECT
'Custom components' AS title,
'/custom_components.sql' AS link,
'Create your own components with HTML.' AS description,
'code' AS icon,
'orange' AS color;
Dashboard Cards
SELECT 'card' AS component, 4 AS columns;
SELECT
'**152** sales today' AS description_md,
true AS active,
'currency-euro' AS icon;
SELECT
'**13** new users' AS description_md,
'user-plus' AS icon,
'green' AS color;
SELECT
'**2** complaints' AS description_md,
'alert-circle' AS icon,
'danger' AS color,
'?view_complaints' AS link,
'red-lt' AS background_color;
SELECT
'**1** pending support request' AS description_md,
'mail-question' AS icon,
'warning' AS color;
Image Gallery
SELECT 'card' AS component,
'My favorite animals in pictures' AS title,
3 AS columns;
SELECT
'Lynx' AS title,
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Lynx_lynx-4.JPG/640px-Lynx_lynx-4.JPG' AS top_image,
'The **lynx** is a medium-sized **wild cat** native to Europe and Asia.' AS description_md,
'star' AS icon;
SELECT
'Squirrel' AS title,
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Tamias-rufus-001.jpg/640px-Tamias-rufus-001.jpg' AS top_image,
'The **chipmunk** is a small, striped rodent of the family Sciuridae.' AS description_md;
Variable Width Cards
SELECT 'card' AS component,
'Beautifully colored cards' AS title;
SELECT
'Red card' AS title,
'red' AS color,
'red-lt' AS background_color,
'Penalty! You are out!' AS description,
'play-football' AS icon;
SELECT
'Blue card' AS title,
'blue' AS color,
6 AS width,
'blue-lt' AS background_color,
'The Blue Card facilitates migration.' AS description,
'currency-euro' AS icon;
SELECT
'Green card' AS title,
'green' AS color,
'green-lt' AS background_color,
'Welcome to the USA!' AS description,
'user-dollar' AS icon;
Cards with Embedded Content
SELECT 'card' AS component,
'Card with embedded remote content' AS title,
2 AS columns;
SELECT
'Embedded Chart' AS title,
'/examples/chart.sql?_sqlpage_embed' AS embed;
SELECT
'Embedded Video' AS title,
'https://www.youtube.com/embed/mXdgmSdaXkg' AS embed,
'iframe' AS embed_mode,
'accelerometer; autoplay; clipboard-write' AS allow,
'350' AS height;
Notes
Cards automatically adapt to screen size. On mobile devices, cards stack vertically regardless of the columns setting.
Use the width property on individual cards for more control over layout than the global columns property.
When embedding external content without embed_mode="iframe", make sure the source is trusted as the content is injected directly into your page.