-
Learn Card
+
+
Learn Card
{% with learn_card_data as data %}
{% include "v3/includes/_learn_card.html" with title=data.title text=data.text links=data.links image_src=data.image_src url=data.url label=data.label %}
{% endwith %}
+
+
+
Account Connections Card
+
+ {% include "v3/includes/_account_connections_card.html" with connections=account_connections_mixed %}
+ {% include "v3/includes/_account_connections_card.html" with connections=account_connections_all_connected %}
+ {% include "v3/includes/_account_connections_card.html" with connections=account_connections_none_connected %}
+
+
+
Testimonial Card
@@ -364,7 +385,7 @@
-
Content event card – clickable cards (link wraps each card)
+
Content event card – clickable cards (link wraps each card)
@@ -405,10 +426,29 @@ Content detail card
+
+
+
Install Card
+
+ {% include "v3/includes/_install_card.html" with title=install_card_title %}
+
+
+
Code blocks
{% include "v3/includes/_code_blocks_story.html" with code_standalone_1=code_demo_beast code_standalone_2=code_demo_beast code_card_1=code_demo_hello code_card_2=code_demo_beast code_card_3=code_demo_install %}
+
+
+
+{% comment %}Dialogs placed outside section to avoid position:fixed containment issues{% endcomment %}
+{% include "v3/includes/_dialog.html" with dialog_id="demo-dialog-with-desc" title="Title of Dialog" description="Description that can go inside of Dialog" primary_url="#_" secondary_url="#_" primary_label="Button" secondary_label="Button" %}
diff --git a/templates/v3/includes/_account_connections_card.html b/templates/v3/includes/_account_connections_card.html
new file mode 100644
index 000000000..e538e73c2
--- /dev/null
+++ b/templates/v3/includes/_account_connections_card.html
@@ -0,0 +1,36 @@
+{% comment %}
+ Account Connections Card
+ Shows linked social/OAuth accounts with connection status and action buttons.
+
+ Variables:
+ heading (str, optional) — card heading, default "Account connections"
+ connections (list of dict) — connection items, each with:
+ .platform (str) — icon key: "github" or "google"
+ .label (str) — display name, e.g. "GitHub"
+ .connected (bool) — whether the account is linked
+ .status_text (str) — status label, e.g. "Connected" or "Not connected"
+ .action_label (str) — button text, e.g. "Manage" or "Connect"
+ .action_url (str) — button destination URL
+
+ Usage:
+ {% include "v3/includes/_account_connections_card.html" with heading="Account connections" connections=account_connections %}
+{% endcomment %}
+
+
diff --git a/templates/v3/includes/_banner.html b/templates/v3/includes/_banner.html
new file mode 100644
index 000000000..c99373864
--- /dev/null
+++ b/templates/v3/includes/_banner.html
@@ -0,0 +1,16 @@
+{% comment %}
+ Banner component for displaying alerts and other information on the screen.
+ Inputs:
+ Required:
+ banner_message, HTML content: Message to be displayed in the banner.
+ Optional:
+ icon_name, string: name of an icon to be displayed. See includes/icon.html for options
+ fate_time, number: time in ms after which the banner should fade. See animation.css for more info
+{% endcomment %}
+
+
+ {% if icon_name %}
+ {% include 'includes/icon.html' with icon_name=icon_name icon_class="banner__icon" icon_size=16 %}
+ {% endif %}
+ {{banner_message|safe}}
+
diff --git a/templates/v3/includes/_dialog.html b/templates/v3/includes/_dialog.html
new file mode 100644
index 000000000..d839b35c0
--- /dev/null
+++ b/templates/v3/includes/_dialog.html
@@ -0,0 +1,53 @@
+{% comment %}
+ Dialog Modal – full-screen overlay with an internal Dialog Container.
+ The Dialog Container is NOT available as a standalone include.
+
+ Open/close is CSS-only via the :target pseudo-class (no JavaScript required).
+ Trigger:
…
+
+ Variables:
+ dialog_id (required): Unique ID for this dialog instance.
+ title (required): Title displayed in the dialog header.
+ description (optional): Descriptive text below the title.
+ primary_label (required): Label for the primary action button.
+ secondary_label (required): Label for the secondary action button.
+ primary_style (optional): Button style for primary action. Default "secondary-grey".
+ secondary_style (optional): Button style for secondary action. Default "primary".
+ primary_url (optional): URL for primary button. Defaults to "" (renders as