From 31fda30c4cb387598a4dcd495b5bddaaf3f6d8dd Mon Sep 17 00:00:00 2001 From: "Julio C. Estrada" Date: Wed, 18 Mar 2026 16:41:35 -0400 Subject: [PATCH 1/3] feat: Add Badges Card V3 component (#2146) (#2164) (#2207) --- core/views.py | 43 +++++++++ libraries/utils.py | 11 ++- static/css/v3/badges-card.css | 86 ++++++++++++++++++ static/css/v3/components.css | 1 + static/img/v3/badges/badge-bronze.png | Bin 0 -> 4999 bytes static/img/v3/badges/badge-first-place.png | Bin 0 -> 4631 bytes static/img/v3/badges/badge-gold-medal.png | Bin 0 -> 5377 bytes static/img/v3/badges/badge-military-star.png | Bin 0 -> 4071 bytes static/img/v3/badges/badge-second-place.png | Bin 0 -> 3799 bytes .../v3/examples/_v3_example_section.html | 28 ++++++ templates/v3/includes/_badges_card.html | 60 ++++++++++++ 11 files changed, 226 insertions(+), 3 deletions(-) create mode 100644 static/css/v3/badges-card.css create mode 100644 static/img/v3/badges/badge-bronze.png create mode 100644 static/img/v3/badges/badge-first-place.png create mode 100644 static/img/v3/badges/badge-gold-medal.png create mode 100644 static/img/v3/badges/badge-military-star.png create mode 100644 static/img/v3/badges/badge-second-place.png create mode 100644 templates/v3/includes/_badges_card.html diff --git a/core/views.py b/core/views.py index 8b539f27a..8a22e1095 100644 --- a/core/views.py +++ b/core/views.py @@ -1170,6 +1170,49 @@ def get_context_data(self, **kwargs): {"value": "networking", "label": "Networking"}, ] ) + badge_img = f"{settings.STATIC_URL}img/v3/badges" + context["badge_icon_srcs"] = [ + f"{badge_img}/badge-first-place.png", + f"{badge_img}/badge-second-place.png", + f"{badge_img}/badge-bronze.png", + f"{badge_img}/badge-gold-medal.png", + f"{badge_img}/badge-military-star.png", + ] + context["demo_badges"] = [ + { + "icon_src": f"{badge_img}/badge-first-place.png", + "name": "Patch Wizard", + "earned_date": "08/08/2025", + }, + { + "icon_src": f"{badge_img}/badge-gold-medal.png", + "name": "Standard Bearer", + "earned_date": "03/07/2025", + }, + { + "icon_src": f"{badge_img}/badge-military-star.png", + "name": "Review Hawk", + "earned_date": "03/06/2025", + }, + { + "icon_src": f"{badge_img}/badge-second-place.png", + "name": "Library Alchemist", + "earned_date": "03/04/2025", + }, + { + "icon_src": f"{badge_img}/badge-first-place.png", + "name": "Bug Catcher", + "earned_date": "02/04/2025", + }, + { + "icon_src": f"{badge_img}/badge-bronze.png", + "name": "Code Whisperer", + "earned_date": "01/01/2025", + }, + ] + + context["demo_badges_few"] = context["demo_badges"][:2] + context["create_account_card_preview_url"] = ( f"{settings.STATIC_URL}img/checker.png" ) diff --git a/libraries/utils.py b/libraries/utils.py index b12fe0178..8112cf1e0 100644 --- a/libraries/utils.py +++ b/libraries/utils.py @@ -495,7 +495,12 @@ def get_avatar(user): return url return getattr(user.commitauthor, "avatar_url", "") or "" - medals = ["🥇", "🥈", "🥉"] + badge_img = f"{settings.STATIC_URL}img/v3/badges" + medals = [ + f"{badge_img}/badge-first-place.png", + f"{badge_img}/badge-second-place.png", + f"{badge_img}/badge-bronze.png", + ] author_dicts = [] for user in combined: @@ -504,7 +509,7 @@ def get_avatar(user): "name": user.display_name or user.get_full_name(), "role": roles[user.id], "avatar_url": get_avatar(user), - "badge": ( + "badge_url": ( medals[len(author_dicts)] if len(author_dicts) < len(medals) else "" ), "bio": "", @@ -516,7 +521,7 @@ def get_avatar(user): "name": ca.display_name, "role": "Contributor", "avatar_url": ca.avatar_url or "", - "badge": ( + "badge_url": ( medals[len(author_dicts)] if len(author_dicts) < len(medals) else "" ), "bio": "", diff --git a/static/css/v3/badges-card.css b/static/css/v3/badges-card.css new file mode 100644 index 000000000..1afdd9a95 --- /dev/null +++ b/static/css/v3/badges-card.css @@ -0,0 +1,86 @@ +.badges-card { + box-sizing: border-box; + max-width: 696px; + padding: var(--space-large, 16px) 0; +} + +/* Filled state — 3-column badge grid */ +.badges-card__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-large, 16px); + padding: 0 var(--space-large, 16px); + margin: 0; + list-style: none; +} + +.badges-card__entry { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--space-default, 8px); +} + +.badges-card__icon { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.badges-card__text { + display: flex; + flex-direction: column; + gap: var(--space-xs); + min-width: 0; +} + +.badges-card__name { + color: var(--color-text-primary, #050816); + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-regular, 400); + line-height: var(--line-height-default, 1.2); +} + +.badges-card__date { + color: var(--color-text-secondary, #585a64); + font-size: var(--font-size-small, 14px); + font-weight: var(--font-weight-regular, 400); + line-height: var(--line-height-default, 1.2); +} + +/* Empty state */ +.badges-card__empty { + display: flex; + flex-direction: column; + gap: var(--space-medium); + padding: 0 var(--space-large, 16px); +} + +.badges-card__icon-row { + display: flex; + gap: var(--space-default, 8px); +} + +.badges-card__description { + margin: 0; + padding: var(--space-medium); + padding-left: 0; + padding-bottom: 0; + color: var(--color-text-secondary, #585a64); + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-semibold, 600); + line-height: var(--line-height-default, 1.2); + letter-spacing: -0.01em; +} + +.badges-card .btn-row { + padding: 0 var(--space-large, 16px); +} + +/* Responsive — 2-column grid on mobile */ +@media (max-width: 696px) { + .badges-card__grid { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/static/css/v3/components.css b/static/css/v3/components.css index da3dbfcc7..b5365672e 100644 --- a/static/css/v3/components.css +++ b/static/css/v3/components.css @@ -21,6 +21,7 @@ @import "./wysiwyg-editor.css"; @import "./search-card.css"; @import "./create-account-card.css"; +@import "./badges-card.css"; @import "./privacy-policy.css"; @import "./library-intro-card.css"; @import "./learn-cards.css"; diff --git a/static/img/v3/badges/badge-bronze.png b/static/img/v3/badges/badge-bronze.png new file mode 100644 index 0000000000000000000000000000000000000000..f7ff87f63457716dadd0d7c7a988002c86ed0561 GIT binary patch literal 4999 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 literal 0 HcmV?d00001 diff --git a/static/img/v3/badges/badge-first-place.png b/static/img/v3/badges/badge-first-place.png new file mode 100644 index 0000000000000000000000000000000000000000..8e9ef71aaef14d7bc733351ac0f0b501d878cf50 GIT binary patch literal 4631 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 N002ovPDHLkV1oG!+Moac literal 0 HcmV?d00001 diff --git a/static/img/v3/badges/badge-gold-medal.png b/static/img/v3/badges/badge-gold-medal.png new file mode 100644 index 0000000000000000000000000000000000000000..d036345c0fa5576779a0d83cec0beca6e002fe84 GIT binary patch literal 5377 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 literal 0 HcmV?d00001 diff --git a/static/img/v3/badges/badge-military-star.png b/static/img/v3/badges/badge-military-star.png new file mode 100644 index 0000000000000000000000000000000000000000..2abb65ee76cbe513141288cfa07b58716bc06d11 GIT binary patch literal 4071 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 Z{{sF_JWzxho=yM&002ovPDHLkV1oJ{-Gu-E literal 0 HcmV?d00001 diff --git a/static/img/v3/badges/badge-second-place.png b/static/img/v3/badges/badge-second-place.png new file mode 100644 index 0000000000000000000000000000000000000000..d74fd74d7d0df9c52cf3f6fd43e44d0618fe4f27 GIT binary patch literal 3799 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 N002ovPDHLkV1mhi7S;d& literal 0 HcmV?d00001 diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index 2bcd7cfae..ad54e1e03 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -236,6 +236,34 @@

Commits per release (by library)

{% endif %} {% include "v3/examples/_v3_example_section_wysiwyg.html" %} +
+

Badges Card (empty with CTA)

+
+ {% include "v3/includes/_badges_card.html" with cta_url="#" cta_label="Explore available badges and how to earn them" empty_icon_srcs=badge_icon_srcs %} +
+
+ +
+

Badges Card (empty without CTA)

+
+ {% include "v3/includes/_badges_card.html" with empty_icon_srcs=badge_icon_srcs %} +
+
+ +
+

Badges Card (filled — 6 badges)

+
+ {% include "v3/includes/_badges_card.html" with badges=demo_badges %} +
+
+ +
+

Badges Card (filled — 2 badges)

+
+ {% include "v3/includes/_badges_card.html" with badges=demo_badges_few %} +
+
+

Create Account Card

diff --git a/templates/v3/includes/_badges_card.html b/templates/v3/includes/_badges_card.html new file mode 100644 index 000000000..b0a14da48 --- /dev/null +++ b/templates/v3/includes/_badges_card.html @@ -0,0 +1,60 @@ +{% comment %} + Badges Card component. + + Variables: + badges (list, optional) - List of badge objects. Each badge has: icon_src, name, earned_date. + Empty or undefined triggers the empty state. + cta_url (string, optional) - CTA target URL (empty state). Omit to hide the CTA button. + cta_label (string, optional) - CTA button text (empty state) + empty_icon_srcs (list, optional) - List of image URLs for the decorative icon row in empty state + + Usage: + Empty state with CTA: + {% include "v3/includes/_badges_card.html" with cta_url="/badges" cta_label="Explore available badges and how to earn them" empty_icon_srcs=badge_icon_srcs %} + + Empty state without CTA: + {% include "v3/includes/_badges_card.html" with empty_icon_srcs=badge_icon_srcs %} + + Filled state: + {% include "v3/includes/_badges_card.html" with badges=user_badges %} +{% endcomment %} +
+
+ Badges +
+
+ + {% if badges %} + {# Filled state #} +
    + {% for badge in badges %} +
  • + +
    + {{ badge.name }} + {{ badge.earned_date }} +
    +
    • + {% endfor %} +
+ {% else %} + {# Empty state #} +
+ +

Badges highlight specific skills, roles, or areas of contribution

+
+ {% if cta_url %} +
+ {% with default_cta="Explore available badges and how to earn them" %} + {% include "v3/includes/_button.html" with url=cta_url label=cta_label|default:default_cta style="secondary-grey" extra_classes="btn-flex" %} + {% endwith %} +
+ {% endif %} + {% endif %} +
From 55fcd7d22c56b3d46cc2270b34e9c68c10806875 Mon Sep 17 00:00:00 2001 From: Julia Hoang Date: Wed, 18 Mar 2026 13:44:25 -0700 Subject: [PATCH 2/3] Improve developer experience on the V3 Demo page --- static/css/v3/v3-examples-section.css | 109 +- .../v3/examples/_v3_example_section.html | 1002 ++++++++++------- .../examples/_v3_example_section_wysiwyg.html | 6 +- 3 files changed, 698 insertions(+), 419 deletions(-) diff --git a/static/css/v3/v3-examples-section.css b/static/css/v3/v3-examples-section.css index c4a693e61..82205156b 100644 --- a/static/css/v3/v3-examples-section.css +++ b/static/css/v3/v3-examples-section.css @@ -20,12 +20,22 @@ margin-bottom: 0; } -.v3-examples-section__block .block-title { +.v3-examples-section__block > h3 { font-size: var(--font-size-base, 16px); font-weight: var(--font-weight-medium, 500); margin-bottom: var(--space-default, 8px); } +.v3-examples-section__anchor-link { + margin-left: var(--space-s, 4px); + color: var(--color-text-secondary); + vertical-align: middle; +} + +.v3-examples-section__anchor-link:hover { + color: var(--color-text-primary); +} + .v3-examples-section__example-box { box-sizing: border-box; width: 100%; @@ -218,3 +228,100 @@ html.dark .v3-examples-section__example-box { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } + +/* ── Table of contents ─────────────────────────── */ + +.v3-examples-section__toc { + margin-bottom: var(--space-xl, 32px); + padding: var(--space-large, 16px) var(--space-xl, 32px); + background: var(--color-surface-weak); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-l, 8px); +} + +html.dark .v3-examples-section__toc { + background: var(--color-surface-mid); +} + +.v3-examples-section__toc-heading { + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-medium, 500); + margin: 0 0 var(--space-default, 8px); + color: var(--color-text-primary); +} + +.v3-examples-section__toc-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + gap: var(--space-s, 4px) var(--space-xl, 32px); +} + +.v3-examples-section__toc-link { + display: inline-block; + padding: var(--space-s, 4px) 0; + font-size: var(--font-size-small, 14px); + color: var(--color-text-link-accent); + text-decoration: none; +} + +.v3-examples-section__toc-link:hover { + text-decoration: underline; +} + +/* ── Scroll offset for anchor links ────────────── */ + +.v3-examples-section__block[id] { + scroll-margin-top: var(--space-xl, 32px); +} + +/* ── Fixed dark mode toggle ────────────────────── */ + +.v3-examples-section__theme-toggle { + position: fixed; + bottom: var(--space-xl, 32px); + right: var(--space-xl, 32px); + z-index: 100; + display: inline-flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + padding: 0 var(--space-l, 16px); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-xl, 12px); + background: var(--color-surface-brand-accent-hovered); + color: var(--color-text-primary); + cursor: pointer; + box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); +} + +.v3-examples-section__theme-toggle:hover { + background: var(--color-navigation-hover); +} + +.v3-examples-section__theme-toggle-sun, +.v3-examples-section__theme-toggle-moon { + display: inline-flex; + align-items: center; +} + +/* Light mode: show moon (switch to dark) */ +.v3-examples-section__theme-toggle-sun { + display: none; +} + +.v3-examples-section__theme-toggle-moon { + display: inline-flex; +} + +/* Dark mode: show sun (switch to light) */ +html.dark .v3-examples-section__theme-toggle-sun { + display: inline-flex; +} + +html.dark .v3-examples-section__theme-toggle-moon { + display: none; +} diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index 2bcd7cfae..2d8a07839 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -1,469 +1,639 @@ +{% comment %} + V3 Component Demo Page + ====================== + Staff-only page for previewing and testing V3 components. + URL: /v3/demo/components/ + + How to add a new component + -------------------------- + Wrap your demo in the standard block pattern using a {% with %} tag. + The section_title is slugified to produce the anchor ID automatically, + and the JS-generated Table of Contents at the top picks it up. + + {% with section_title="My New Component" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_my_component.html" with ... %} +
+
+ {% endwith %} + + Features + -------- + - Table of Contents: Auto-generated via inline JS from every + .v3-examples-section__block[id] > h3 on the page. + - Anchor links: Each section gets an id from {{ section_title|slugify }}, + so you can link directly, e.g. /v3/demo/components/#basic-card. + - Dark mode toggle: Fixed button in the bottom-right corner calls the + global changeTheme() function for quick theme switching. + - Styles: static/css/v3/v3-examples-section.css — h3 headings inside + __block are styled via the structural selector (no class needed). +{% endcomment %}
- {% comment %}V3 examples section for testing. To be removed – everything under v3/examples/ is disposable.{% endcomment %}

V3 Examples for testing

-
-

Buttons

-
{% include "v3/examples/_v3_example_buttons_block.html" %}
-
-
-

Tooltip button

-
-
- {% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" button_text="Help" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Right" position="right" button_text="Help" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Bottom" position="bottom" button_text="Help" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Left" position="left" button_text="Help" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="More information here" position="bottom" button_text="Info" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Right" position="right" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Bottom" position="bottom" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Left" position="left" %} - {% include "v3/includes/_button_tooltip_v3.html" with label="Icon only tooltip" position="bottom" %} -
+ + {% comment %}Table of contents – generated via JS from the section h3 headings.{% endcomment %} + + + {% with section_title="Buttons" %} +
+

{{ section_title }}

+
{% include "v3/examples/_v3_example_buttons_block.html" %}
-
-
-

Avatar

-
- - - - - - - - - - - - - - - - - - - - -
Variants -
- {% include "v3/includes/_avatar_v3.html" with src="https://thispersondoesnotexist.com/" size="md" %} - Example photo -
- 		-
- {% with user_avatar_url=request.user.get_thumbnail_url %} - {% if user_avatar_url %} - {% include "v3/includes/_avatar_v3.html" with src=user_avatar_url size="md" %} - {% elif request.user.is_authenticated %} - {% include "v3/includes/_avatar_v3.html" with name=request.user.display_name size="md" %} - {% else %} - {% include "v3/includes/_avatar_v3.html" with size="md" %} - {% endif %} - {% endwith %} - You -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="yellow" %} - Yellow -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="green" %} - Green -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="teal" %} - Teal -
- 		-
- {% include "v3/includes/_avatar_v3.html" %} - Placeholder -
-
Sizes -
- {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="sm" %} - sm -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="md" %} - md -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="lg" %} - lg -
- 		-
- {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="xl" %} - xl -
-
-
-
-
-

Carousel buttons

-
{% include "v3/includes/_carousel_buttons.html" %}
-
-
-

Detail card carousel

-
- {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo" heading="Libraries categories" cards=demo_cards_carousel_cards %} -
-
-
-

Detail card carousel with autoplay

-
- {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards autoplay=True autoplay_delay=5000 %} -
-
-
-

Detail card carousel with infinite looping and autoplay

-
- {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-infinite-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards infinite=True autoplay=True autoplay_delay=5000 %} -
-
-
-

Post cards list

-
-
-

- Posts from the Boost community -

-
    -
  • - {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Richard Thomson" author_role="Contributor" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Richard+Thomson&size=48" %} - {% include "v3/includes/_post_card_v3.html" %} - {% endwith %} -
    • -
  • - {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Peter Dimov" author_role="Maintainer" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Peter+Dimov&size=48" %} - {% include "v3/includes/_post_card_v3.html" %} - {% endwith %} -
    • -
  • - {% with post_title="Boost.Bind and modern C++: a quick overview" post_url="#" post_date="15/02/2025" post_category="Releases" post_tag="bind" author_name="Alex Morgan" author_role="Contributor" author_show_badge=False author_avatar_url="https://thispersondoesnotexist.com/" %} - {% include "v3/includes/_post_card_v3.html" %} - {% endwith %} -
    • -
-
- {% include "v3/includes/_button.html" with label="View all posts" url="#" %} + {% endwith %} + + {% with section_title="Tooltip button" %} +
+

{{ section_title }}

+
+
+ {% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" button_text="Help" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Right" position="right" button_text="Help" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Bottom" position="bottom" button_text="Help" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Left" position="left" button_text="Help" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="More information here" position="bottom" button_text="Info" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Right" position="right" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Bottom" position="bottom" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Left" position="left" %} + {% include "v3/includes/_button_tooltip_v3.html" with label="Icon only tooltip" position="bottom" %}
-
-
-
-
-

Detail card (single)

-
- {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Richard Thomson" author_role="Contributor" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Richard+Thomson&size=48" %} - {% include "v3/includes/_post_card_v3.html" %} - {% endwith %} +
+
+ {% endwith %} + + {% with section_title="Avatar" %} +
+

{{ section_title }}

+
+ + + + + + + + + + + + + + + + + + + + +
Variants +
+ {% include "v3/includes/_avatar_v3.html" with src="https://thispersondoesnotexist.com/" size="md" %} + Example photo +
+ 		+
+ {% with user_avatar_url=request.user.get_thumbnail_url %} + {% if user_avatar_url %} + {% include "v3/includes/_avatar_v3.html" with src=user_avatar_url size="md" %} + {% elif request.user.is_authenticated %} + {% include "v3/includes/_avatar_v3.html" with name=request.user.display_name size="md" %} + {% else %} + {% include "v3/includes/_avatar_v3.html" with size="md" %} + {% endif %} + {% endwith %} + You +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="yellow" %} + Yellow +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="green" %} + Green +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="Jane Doe" variant="teal" %} + Teal +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" %} + Placeholder +
+
Sizes +
+ {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="sm" %} + sm +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="md" %} + md +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="lg" %} + lg +
+ 		+
+ {% include "v3/includes/_avatar_v3.html" with name="JD" variant="yellow" size="xl" %} + xl +
+
+
+
+ {% endwith %} + + {% with section_title="Carousel buttons" %} +
+

{{ section_title }}

+
{% include "v3/includes/_carousel_buttons.html" %}
+
+ {% endwith %} + + {% with section_title="Detail card carousel" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo" heading="Libraries categories" cards=demo_cards_carousel_cards %} +
+
+ {% endwith %} + + {% with section_title="Detail card carousel with autoplay" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards autoplay=True autoplay_delay=5000 %} +
+
+ {% endwith %} + + {% with section_title="Detail card carousel with infinite looping and autoplay" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-infinite-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards infinite=True autoplay=True autoplay_delay=5000 %} +
+
+ {% endwith %} + + {% with section_title="Post cards list" %} +
+

{{ section_title }}

+
+
+

+ Posts from the Boost community +

+
    +
  • + {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Richard Thomson" author_role="Contributor" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Richard+Thomson&size=48" %} + {% include "v3/includes/_post_card_v3.html" %} + {% endwith %} +
    • +
  • + {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Peter Dimov" author_role="Maintainer" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Peter+Dimov&size=48" %} + {% include "v3/includes/_post_card_v3.html" %} + {% endwith %} +
    • +
  • + {% with post_title="Boost.Bind and modern C++: a quick overview" post_url="#" post_date="15/02/2025" post_category="Releases" post_tag="bind" author_name="Alex Morgan" author_role="Contributor" author_show_badge=False author_avatar_url="https://thispersondoesnotexist.com/" %} + {% include "v3/includes/_post_card_v3.html" %} + {% endwith %} +
    • +
+
+ {% include "v3/includes/_button.html" with label="View all posts" url="#" %} +
+
+
+
+ {% endwith %} + + {% with section_title="Detail card" %} +
+

{{ section_title }}

+
+ {% with post_title="A talk by Richard Thomson at the Utah C++ Programmers Group" post_url="#" post_date="03/03/2025" post_category="Issues" post_tag="beast" author_name="Richard Thomson" author_role="Contributor" author_show_badge=True author_avatar_url="https://ui-avatars.com/api/?name=Richard+Thomson&size=48" %} + {% include "v3/includes/_post_card_v3.html" %} + {% endwith %} +
-
-
-

Search Card

-
- {% include "v3/includes/_search_card.html" with heading="What are you trying to find?" action_url="#" popular_terms=popular_terms %} + {% endwith %} + + {% with section_title="Search Card" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_search_card.html" with heading="What are you trying to find?" action_url="#" popular_terms=popular_terms %} +
-
+ {% endwith %} + {% if library_intro %} -
-

Library Intro Card

+ {% with section_title="Library Intro Card" %} +
+

{{ section_title }}

{% with intro=library_intro %} - {% include "v3/includes/_library_intro_card.html" with library_name=intro.library_name description=intro.description authors=intro.authors cta_url=intro.cta_url %} + {% include "v3/includes/_library_intro_card.html" with library_name=intro.library_name description=intro.description authors=intro.authors cta_url=intro.cta_url %} {% endwith %}
+ {% endwith %} {% endif %} + {% if example_library_choices %} -
-

Commits per release (by library)

-
-
- - -
- {% if example_library_not_found %} -

Library “{{ example_library_not_found }}” not found.

- {% elif example_library_commits_bars %} -
- {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="default" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="yellow" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} -
-
-

Full width

- {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Takes full width of container; up to 20 bars." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} -
-
-
-

5 bars only

- {% with example_bars_5=example_library_commits_bars|slice:":5" %} - {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Same data limited to 5 bars." bars=example_bars_5 theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} - {% endwith %} + {% with section_title="Commits per release" %} +
+

{{ section_title }}

+
+
+ + +
+ {% if example_library_not_found %} +

Library "{{ example_library_not_found }}" not found.

+ {% elif example_library_commits_bars %} +
+ {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="default" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="yellow" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Commit count by Boost release for this library." bars=example_library_commits_bars theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %}
-
- {% endif %} +
+

Full width

+ {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Takes full width of container; up to 20 bars." bars=example_library_commits_bars theme="green" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} +
+
+
+

5 bars only

+ {% with example_bars_5=example_library_commits_bars|slice:":5" %} + {% include "v3/includes/_stats_in_numbers.html" with heading="Commits per release" description="Same data limited to 5 bars." bars=example_bars_5 theme="teal" primary_cta_label="View library" primary_cta_url=example_library_detail_url %} + {% endwith %} +
+
+ {% endif %} +
-
+ {% endwith %} {% endif %} + {% include "v3/examples/_v3_example_section_wysiwyg.html" %} -
-

Create Account Card

-
- {% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %} -
-
-
-

Form inputs

-
-
- {% include "v3/includes/_field_text.html" with name="ex_basic" label="Text field" placeholder="Enter text..." %} - {% include "v3/includes/_field_text.html" with name="ex_search" label="With icon" placeholder="Search..." icon_left="search" %} - {% include "v3/includes/_field_text.html" with name="ex_error" label="Error state" placeholder="Enter value" error="This field is required." %} - {% include "v3/includes/_field_checkbox.html" with name="ex_agree" label="I agree to the terms and conditions" %} - {% include "v3/includes/_field_combo.html" with name="ex_library" label="Combo (searchable)" placeholder="Search libraries..." options_json=demo_libs_json %} - {% include "v3/includes/_field_multiselect.html" with name="ex_categories" label="Multi-select" placeholder="Select categories..." options_json=demo_cats_json %} + + {% with section_title="Create Account Card" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %}
-
+ {% endwith %} -
-

Alert Banner

-
-
- {% include "v3/includes/_banner.html" with icon_name=banner_data.icon_name banner_message=banner_data.banner_message %} + {% with section_title="Form inputs" %} +
+

{{ section_title }}

+
+
+ {% include "v3/includes/_field_text.html" with name="ex_basic" label="Text field" placeholder="Enter text..." %} + {% include "v3/includes/_field_text.html" with name="ex_search" label="With icon" placeholder="Search..." icon_left="search" %} + {% include "v3/includes/_field_text.html" with name="ex_error" label="Error state" placeholder="Enter value" error="This field is required." %} + {% include "v3/includes/_field_checkbox.html" with name="ex_agree" label="I agree to the terms and conditions" %} + {% include "v3/includes/_field_combo.html" with name="ex_library" label="Combo (searchable)" placeholder="Search libraries..." options_json=demo_libs_json %} + {% include "v3/includes/_field_multiselect.html" with name="ex_categories" label="Multi-select" placeholder="Select categories..." options_json=demo_cats_json %} +
- {% include "v3/includes/_banner.html" with icon_name=banner_data.icon_name banner_message=banner_data.banner_message fade_time=5000 %}
-
+ {% endwith %} -
-

Basic Card

- {% with basic_card_data as card %} + {% with section_title="Alert Banner" %} +
+

{{ section_title }}

-

Card with two buttons

- {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label secondary_button_url=card.secondary_button_url secondary_button_label=card.secondary_button_label %} -

Card with one button

- {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label %} +
+ {% include "v3/includes/_banner.html" with icon_name=banner_data.icon_name banner_message=banner_data.banner_message %} +
+ {% include "v3/includes/_banner.html" with icon_name=banner_data.icon_name banner_message=banner_data.banner_message fade_time=5000 %}
- {% endwith %} -
+
+ {% endwith %} -
-

Horizontal Card

- {% with horizontal_card_data as card %} -
- {% include "v3/includes/_horizontal_card.html" with title=card.title text=card.text image_url=card.image_url button_url=card.button_url button_label=card.button_label %} + {% with section_title="Basic Card" %} +
+

{{ section_title }}

+ {% with basic_card_data as card %} +
+

Card with two buttons

+ {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label secondary_button_url=card.secondary_button_url secondary_button_label=card.secondary_button_label %} +

Card with one button

+ {% include "v3/includes/_basic_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label %} +
+ {% endwith %}
- {% endwith %} -
+ {% endwith %} -
-

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 %} + {% with section_title="Horizontal Card" %} +
+

{{ section_title }}

+ {% with horizontal_card_data as card %} +
+ {% include "v3/includes/_horizontal_card.html" with title=card.title text=card.text image_url=card.image_url button_url=card.button_url button_label=card.button_label %} +
{% endwith %}
-
+ {% 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 %} + {% with section_title="Learn Card" %} +
+

{{ section_title }}

+
+ {% 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 %} +
-
+ {% endwith %} -
-

Testimonial Card

-
- {% include "v3/includes/_testimonial_card.html" with heading=testimonial_data.heading testimonials=testimonial_data.testimonials %} + {% with section_title="Account Connections Card" %} +
+

{{ section_title }}

+
+ {% 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 %} +
-
-
-

Thread Archive Card

- {% with basic_card_data as card %} -
{% include "v3/includes/_thread_archive_card.html" %}
- {% endwith %} -
-
-

Vertical Layout Card

- {% with basic_card_data as card %} + {% endwith %} + + {% with section_title="Testimonial Card" %} +
+

{{ section_title }}

- {% include "v3/includes/_vertical_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label primary_style="secondary-grey" image_url=card.image %} + {% include "v3/includes/_testimonial_card.html" with heading=testimonial_data.heading testimonials=testimonial_data.testimonials %}
- {% endwith %} -
-
-

Mailing List Card

-
{% include "v3/includes/_mailing_list_card.html" %}
-
-
-

Why Boost

-
- {% comment %}Use 8 cards to test ACs: "Why Boost Cards render correctly with 1–8 cards" and "Cards wrap correctly after four items on desktop/tablet" (4+4 rows).{% endcomment %} -
-

Why Boost?

-
- {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="Tap into quick answers, networking, and chat with 24,000+ members." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Documentation" description="Browse library docs, examples, and release notes in one place." icon_name="link" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Community" description="Mailing lists, GitHub, and community guidelines for contributors." icon_name="human" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Releases" description="Latest releases, download links, and release notes." icon_name="info-box" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Learn" description="Access documentation, books, and courses to level up your C++." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Contribute" description="Report issues, submit patches, and join the community." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Stay updated" description="Releases, news, and announcements from the Boost community." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Libraries" description="Portable, peer-reviewed libraries for a wide range of use cases." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Standards" description="Many Boost libraries have been adopted into the C++ standard." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Quality" description="Peer-reviewed code and documentation maintained by the community." icon_name="bullseye-arrow" %} - {% include "v3/includes/_content_detail_card_item.html" with title="Cross-platform" description="Libraries designed to work across compilers and platforms." icon_name="bullseye-arrow" %} +
+ {% endwith %} + + {% with section_title="Thread Archive Card" %} +
+

{{ section_title }}

+ {% with basic_card_data as card %} +
{% include "v3/includes/_thread_archive_card.html" %}
+ {% endwith %} +
+ {% endwith %} + + {% with section_title="Vertical Layout Card" %} +
+

{{ section_title }}

+ {% with basic_card_data as card %} +
+ {% include "v3/includes/_vertical_card.html" with title=card.title text=card.text primary_button_url=card.primary_button_url primary_button_label=card.primary_button_label primary_style="secondary-grey" image_url=card.image %}
-
-
-
-
-

Category tags

-
- {% include "v3/includes/_category_cards.html" with show_version_tags=True %} -
-
-
-

Event cards

-
{% include "v3/includes/_event_cards.html" %}
-
-
-

Achievement cards

-
-

Empty Card

- {% include "v3/includes/_achievement_card.html" %} -

Card with Achievements

- {% include "v3/includes/_achievement_card.html" with achievements=achievements_data.achievements primary_button_url="https://www.example.com" %} -
-
- -
-

Content event list – clickable cards (link wraps each card)

-
-
-

- Releases -

-
    -
  • - {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=False %} -
    • -
  • - {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=False %} -
    • -
  • - {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=False %} -
    • -
-
{% include "v3/includes/_button.html" with label="View all" url="#" %}
-
-
-
-
-

Content event card – clickable cards (link wraps each card)

-
-
-

- Releases -

-
    -
  • - {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=True %} -
    • -
  • - {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=True %} -
    • -
  • - {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=True %} -
    • -
-
{% include "v3/includes/_button.html" with label="View all" url="#" %}
-
-
-
-
-

Content detail card

-
-
-

Content detail card

-

With icon and optional title link.

-
-
-

With link

- {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="Tap into quick answers, networking, and chat with 24,000+ members." icon_name="get-help" title_url="/help" %} + {% endwith %} +
+ {% endwith %} + + {% with section_title="Mailing List Card" %} +
+

{{ section_title }}

+
{% include "v3/includes/_mailing_list_card.html" %}
+
+ {% endwith %} + + {% with section_title="Why Boost" %} +
+

{{ section_title }}

+
+ {% comment %}Use 8 cards to test ACs: "Why Boost Cards render correctly with 1–8 cards" and "Cards wrap correctly after four items on desktop/tablet" (4+4 rows).{% endcomment %} +
+

Why Boost?

+
+ {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="Tap into quick answers, networking, and chat with 24,000+ members." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Documentation" description="Browse library docs, examples, and release notes in one place." icon_name="link" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Community" description="Mailing lists, GitHub, and community guidelines for contributors." icon_name="human" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Releases" description="Latest releases, download links, and release notes." icon_name="info-box" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Learn" description="Access documentation, books, and courses to level up your C++." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Contribute" description="Report issues, submit patches, and join the community." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Stay updated" description="Releases, news, and announcements from the Boost community." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Libraries" description="Portable, peer-reviewed libraries for a wide range of use cases." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Standards" description="Many Boost libraries have been adopted into the C++ standard." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Quality" description="Peer-reviewed code and documentation maintained by the community." icon_name="bullseye-arrow" %} + {% include "v3/includes/_content_detail_card_item.html" with title="Cross-platform" description="Libraries designed to work across compilers and platforms." icon_name="bullseye-arrow" %}
-
-

Another card

- {% include "v3/includes/_content_detail_card_item.html" with title="Another card" description="With a different icon. Icon is optional and dynamic." icon_name="device-tv" %} +
+
+
+ {% endwith %} + + {% with section_title="Category tags" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_category_cards.html" with show_version_tags=True %} +
+
+ {% endwith %} + + {% with section_title="Event cards" %} +
+

{{ section_title }}

+
{% include "v3/includes/_event_cards.html" %}
+
+ {% endwith %} + + {% with section_title="Achievement cards" %} +
+

{{ section_title }}

+
+

Empty Card

+ {% include "v3/includes/_achievement_card.html" %} +

Card with Achievements

+ {% include "v3/includes/_achievement_card.html" with achievements=achievements_data.achievements primary_button_url="https://www.example.com" %} +
+
+ {% endwith %} + + {% with section_title="Content event list" %} +
+

{{ section_title }}

+
+
+

+ Releases +

+
    +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=False %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=False %} +
    • +
+
{% include "v3/includes/_button.html" with label="View all" url="#" %}
+
+
+
+ {% endwith %} + + {% with section_title="Content event card" %} +
+

{{ section_title }}

+
+
+

+ Releases +

+
    +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.90.0 closed for major changes" description="Release closed for major code changes. Still open for serious problem fixes and docs changes without release manager review." date="29/10/25" datetime="29/10/25" card_url="#event-0" card_aria_label="Boost 1.90.0 closed for major changes" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="C++ Now 2025 call for submissions" description="C++ Now conference is accepting talk proposals until March 15. Topics include modern C++, Boost libraries, and tooling." date="12/02/25" datetime="12/02/25" card_url="#event-1" card_aria_label="C++ Now 2025 call for submissions" event_card_wrapper=True %} +
    • +
  • + {% include "v3/includes/_content_event_card_item.html" with title="Boost 1.89.0 released" description="Boost 1.89.0 is available with updates to Asio, Beast, and several other libraries. See release notes for details." date="15/01/25" datetime="15/01/25" card_url="#event-2" card_aria_label="Boost 1.89.0 released" event_card_wrapper=True %} +
    • +
+
{% include "v3/includes/_button.html" with label="View all" url="#" %}
+
+
+
+ {% endwith %} + + {% with section_title="Content detail card" %} +
+

{{ section_title }}

+
+
+

Content detail card

+

With icon and optional title link.

+
+
+

With link

+ {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="Tap into quick answers, networking, and chat with 24,000+ members." icon_name="get-help" title_url="/help" %} +
+
+

Another card

+ {% include "v3/includes/_content_detail_card_item.html" with title="Another card" description="With a different icon. Icon is optional and dynamic." icon_name="device-tv" %} +
-
-
+
+
- + {% endwith %} -
-

Install Card

-
- {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-1" %} + {% with section_title="Install Card" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-1" %} +
+ {% endwith %} -

Install Card 2 (just a test for having multiple Install Cards on the same page)

-
- {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-2" %} + {% with section_title="Install Card 2" %} +
+

{{ section_title }}

+
+ {% include "v3/includes/_install_card.html" with title=install_card_title card_id="install-2" %} +
-
+ {% endwith %} -
-

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 %} + {% with section_title="Code blocks" %} +
+

{{ section_title }}

+
+ {% 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 %} +
-
+ {% endwith %} -
-

Dialog

-
-

Dialog Modal With Description

- Open dialog + {% with section_title="Dialog" %} +
+

{{ section_title }}

+
+

Dialog Modal With Description

+ Open dialog +
-
+ {% endwith %} + + {% comment %} + Position Fixed dark mode toggle for quick theme switching without scrolling to the header. + {% endcomment %} + +{% comment %} +Table of Contents generator – runs after all section blocks have been parsed. +{% endcomment %} + + {% 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/examples/_v3_example_section_wysiwyg.html b/templates/v3/examples/_v3_example_section_wysiwyg.html index 615d26925..ecd3cb7c7 100644 --- a/templates/v3/examples/_v3_example_section_wysiwyg.html +++ b/templates/v3/examples/_v3_example_section_wysiwyg.html @@ -1,5 +1,6 @@ -
-

WYSIWYG editor

+{% with section_title="WYSIWYG editor" %} +
+

{{ section_title }}

@@ -185,3 +186,4 @@

WYSIWYG editor

import('/static/js/v3/wysiwyg-editor.js').then(m => m.initWysiwyg('id_demo_content'));
+{% endwith %} From 172746f4584defd31b7903f2ae6ffe6d08fff16a Mon Sep 17 00:00:00 2001 From: Julia Hoang Date: Wed, 18 Mar 2026 14:12:26 -0700 Subject: [PATCH 3/3] Integrate more example --- .../v3/examples/_v3_example_section.html | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index b643e1b47..247113cd3 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -310,34 +310,43 @@

{{ section_title }}

{% endif %} {% include "v3/examples/_v3_example_section_wysiwyg.html" %} -
-

Badges Card (empty with CTA)

+ + {% with section_title="Badges Card (empty with CTA)" %} +
+

{{ section_title }}

{% include "v3/includes/_badges_card.html" with cta_url="#" cta_label="Explore available badges and how to earn them" empty_icon_srcs=badge_icon_srcs %}
+ {% endwith %} -
-

Badges Card (empty without CTA)

+ + {% with section_title="Badges Card (empty without CTA)" %} +
+

{{ section_title }}

{% include "v3/includes/_badges_card.html" with empty_icon_srcs=badge_icon_srcs %}
+ {% endwith %} -
-

Badges Card (filled — 6 badges)

+ {% with section_title="Badges Card (filled — 6 badges)" %} +
+

{{ section_title }}

{% include "v3/includes/_badges_card.html" with badges=demo_badges %}
+ {% endwith %} -
-

Badges Card (filled — 2 badges)

+ {% with section_title="Badges Card (filled — 2 badges)" %} +
+

{{ section_title }}

{% include "v3/includes/_badges_card.html" with badges=demo_badges_few %}
- + {% endwith %} {% with section_title="Create Account Card" %}