feat(card) :: let a card's link open a new tab

CHANGELOG.md

@@ -22,6 +22,8 @@
 
 - Each item of the tracking component accepts a `link`. ([#900](https://github.com/sqlpage/SQLPage/issues/900))
 
+- Each card of the card component accepts a `target`, such as `_blank` to open its link in a new tab. ([#820](https://github.com/sqlpage/SQLPage/issues/820))
+
 - Custom components can call inline partials inside `each_row` and after it, when the partials are defined before `each_row`. ([#846](https://github.com/sqlpage/SQLPage/issues/846))
 
 ## v0.47.0 (2026-10-15)

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -24,6 +24,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('footer', 'Muted text to display at the bottom of the card.', 'TEXT', FALSE, TRUE),
     ('footer_md', 'Muted text to display at the bottom of the card, with rich text formatting in Markdown format.', 'TEXT', FALSE, TRUE),
     ('link', 'An URL to which the user should be taken when they click on the card.', 'URL', FALSE, TRUE),
+    ('target', 'Where the card''s link opens: "_blank" for a new tab, "_self" for the same tab, "_parent" for the parent frame, or "_top" for the full body of the window.', 'TEXT', FALSE, TRUE),
     ('footer_link', 'An URL to which the user should be taken when they click on the footer.', 'URL', FALSE, TRUE),
     ('style', 'Inline style property to your iframe embed code. For example "background-color: #FFFFFF"', 'TEXT', FALSE, TRUE),
     ('height', 'Height of the iframe embed code, in pixels. Used only when embed_mode is ''iframe''.', 'INTEGER', FALSE, TRUE),

sqlpage/templates/card.handlebars

@@ -35,7 +35,7 @@
                 "
                 {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                 {{#if link}}
-                    <a href="{{link}}" style="text-decoration: inherit; color: inherit">
+                    <a href="{{link}}"{{#if target}} target="{{target}}"{{/if}} style="text-decoration: inherit; color: inherit">
                 {{/if}}
                 {{#if top_image}}
                     <img src="{{top_image}}" class="card-img-top"{{#if top_image_width}} width="{{top_image_width}}"{{/if}}{{#if top_image_height}} height="{{top_image_height}}"{{/if}}{{#if top_image_lazy}} loading="lazy"{{/if}}/>

tests/end-to-end/fixtures/card/target/index.sql

@@ -0,0 +1,3 @@
+SELECT 'card' AS component;
+SELECT 'In a new tab' AS title, 'https://example.com' AS link, '_blank' AS target;
+SELECT 'In the same tab' AS title, 'https://example.com' AS link;

tests/end-to-end/fixtures/card/target/test.ts

@@ -0,0 +1,10 @@
+import { expect, test } from "../../../fixture.ts";
+
+test("a card's link opens where its target says", async ({ page }) => {
+  await expect(
+    page.getByRole("link", { name: "In a new tab" }),
+  ).toHaveAttribute("target", "_blank");
+  await expect(
+    page.getByRole("link", { name: "In the same tab" }),
+  ).not.toHaveAttribute("target");
+});