The card component

A grid where each element is a small card that displays a piece of data.

Top-level parameters

name	type	description
class	TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
columns	INTEGER	The number of columns in the grid of cards. This is just a hint, the grid will adjust dynamically to the user's screen size, rendering fewer columns if needed to fit the contents. To control the size of cards individually, use the `width` row-level property instead.
description	TEXT	A short paragraph displayed below the title.
description_md	TEXT	A short paragraph displayed below the title - formatted using markdown.
title	TEXT	Text header at the top of the list of cards.

Row-level parameters

name	required	type	description
title	REQUIRED	TEXT	Name of the card, displayed at the top.
active		BOOLEAN	Whether this item in the grid is considered "active". Active items are displayed more prominently.
allow		TEXT	The permissions policy of the iframe embed code, for instance "fullscreen; clipboard-write". Used only when embed_mode is 'iframe'.
background_color		COLOR	The background color of the card.
class		TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
color		COLOR	The name of a color, to be displayed on the left of the card to highlight it. If the embed parameter is enabled and you don't have a title or description, this parameter won't apply.
description		TEXT	The body of the card, where you put the main text contents of the card. This does not support rich text formatting, only plain text. If you want to use rich text formatting, use the `description_md` property instead.
description_md		TEXT	`The body of the card, in Markdown format. This is useful if you want to display a lot of text in the card, with many options for formatting, such as line breaks, bold, italics, lists, #titles, [links](target.sql), ![images](photo.jpg), etc.`
embed		TEXT	A url whose contents will be fetched and injected into the body of this card. This can be used to inject arbitrary html content, but is especially useful for injecting the output of other sql files rendered by SQLPage. For the latter case you can pass the `?_sqlpage_embed` query parameter, which will skip the shell layout
embed_mode		TEXT	Set to 'iframe' to embed the target (specified through embed property) in an iframe. Unless this is explicitly set, the embed target is fetched and injected within the parent page. If embed_mode is set to iframe, You can also set height and width parameters to configure the appearance and the sandbox and allow parameters to configure security aspects of the iframe. Refer to the MDN page for an explanation of these parameters.
footer		TEXT	Muted text to display at the bottom of the card.
footer_link		URL	An URL to which the user should be taken when they click on the footer.
footer_md		TEXT	Muted text to display at the bottom of the card, with rich text formatting in Markdown format.
height		INTEGER	Height of the iframe embed code, in pixels. Used only when embed_mode is 'iframe'.
icon		ICON	Name of an icon to display on the right side of the card.
id		TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
link		URL	An URL to which the user should be taken when they click on the card.
sandbox		TEXT	The restrictions to apply to the iframe embed code, for instance "allow-scripts allow-same-origin". Used only when embed_mode is 'iframe'.
style		TEXT	Inline style property to your iframe embed code. For example "background-color: #FFFFFF"
top_image		URL	The URL (absolute or relative) of an image to display at the top of the card.
top_image_height		INTEGER	Specify the top image height, in pixels. Helps prevent layout shifts.
top_image_lazy		BOOLEAN	Whether the top image must be lazily loaded. Defaults to false, meaning eagerly loaded.
top_image_width		INTEGER	Specify the top image width, in pixels. Helps prevent layout shifts.
width		INTEGER	The width of the card, between 1 (smallest) and 12 (full-width). The default width is 3, resulting in 4 cards per line. When embed_mode is 'iframe', this is used as the width of the iframe instead, and defaults to 100%.

Example 1

A beautiful card grid with bells and whistles, showing examples of SQLPage features.

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#component) and [write](?component=csv#component) **CSV** files.' as footer_md;
select 
    'Custom components'      as title,
    '/custom_components.sql' as link,
    'If you know some HTML, you can create your own components for your application.' as description,
    'code'                   as icon,
    'orange'                 as color,
    'You can look at the [source of the official components](https://github.com/sqlpage/SQLPage/tree/main/sqlpage/templates) for inspiration.' as footer_md;

Result

Popular SQLPage features

Download as spreadsheet

Using the CSV component, you can download your data as a spreadsheet.

SQLPage can both read and write CSV files.

Custom components

If you know some HTML, you can create your own components for your application.

You can look at the source of the official components for inspiration.

Example 2

You can use cards to display a dashboard with quick access to important information. Use markdown to format the text.

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;

Result

152 sales today

13 new users

2 complaints

1 pending support request

Example 3

A gallery of images.

select 
    'card' as component,
    'My favorite animals in pictures' as title,
    3      as columns;
select 
    'Lynx' as title,
    'The **lynx** is a medium-sized **wild cat** native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas.' as description_md,
    'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Lynx_lynx_-_05.jpg/330px-Lynx_lynx_-_05.jpg' as top_image,
    330    as top_image_width,
    495    as top_image_height,
    TRUE   as top_image_lazy,
    'star' as icon;
select 
    'Squirrel' as title,
    'The **chipmunk** is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.' as description_md,
    'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/American_squirrel_eating_nut%2C_13_Jun_2013.JPG/330px-American_squirrel_eating_nut%2C_13_Jun_2013.JPG' as top_image,
    330        as top_image_width,
    495        as top_image_height,
    TRUE       as top_image_lazy;
select 
    'Spider' as title,
    'The **jumping spider family** (_Salticidae_) contains more than 600 described genera and about *6000 described species*, making it the largest family of spiders with about 13% of all species.' as description_md,
    'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Australian_orb_weaver_spinning_web.jpg/330px-Australian_orb_weaver_spinning_web.jpg' as top_image,
    330      as top_image_width,
    495      as top_image_height,
    TRUE     as top_image_lazy;

Result

My favorite animals in pictures

Lynx

The lynx is a medium-sized wild cat native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas.

Squirrel

The chipmunk is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.

Spider

The jumping spider family (Salticidae) contains more than 600 described genera and about 6000 described species, making it the largest family of spiders with about 13% of all species.

Example 4

Beautifully colored cards with variable width. The blue card (width 6) takes half the screen, whereas of the red and green cards have the default width of 3

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 of foreigners to Europe.' as description,
    'currency-euro' as icon;
select 
    'Green card'  as title,
    'green'       as color,
    'green-lt'    as background_color,
    'Welcome to the United States of America !' as description,
    'user-dollar' as icon;

Result

Beautifully colored cards

Red card

Penalty! You are out!

Blue card

The Blue Card facilitates migration of foreigners to Europe.

Green card

Welcome to the United States of America !

Example 5

Cards with remote 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,
    'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' as allow,
    'iframe'         as embed_mode,
    '350'            as height;

The card component

Top-level parameters

Row-level parameters

Example 1

Result

Popular SQLPage features

Download as spreadsheet

Custom components

Example 2

Result

Example 3

Result

My favorite animals in pictures

Lynx

Squirrel

Spider

Example 4

Result

Beautifully colored cards

Red card

Blue card

Green card

Example 5

Result

Card with embedded remote content

Embedded Chart

Embedded Video

See also: other components