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/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/static/img/v3/badges/badge-bronze.png b/static/img/v3/badges/badge-bronze.png new file mode 100644 index 000000000..f7ff87f63 Binary files /dev/null and b/static/img/v3/badges/badge-bronze.png differ 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 000000000..8e9ef71aa Binary files /dev/null and b/static/img/v3/badges/badge-first-place.png differ 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 000000000..d036345c0 Binary files /dev/null and b/static/img/v3/badges/badge-gold-medal.png differ 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 000000000..2abb65ee7 Binary files /dev/null and b/static/img/v3/badges/badge-military-star.png differ 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 000000000..d74fd74d7 Binary files /dev/null and b/static/img/v3/badges/badge-second-place.png differ diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index 2bcd7cfae..247113cd3 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -1,469 +1,676 @@ +{% 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" %}
+
+ {% 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" %} +
-
-
-

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

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 %} + {% endwith %} + + {% with section_title="Carousel buttons" %} +
+

{{ section_title }}

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

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

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

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="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 %} +
-
-
-

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="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="#" %} +
+
+
-
-
-

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

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

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

Form inputs

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

{{ 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/_badges_card.html" with empty_icon_srcs=badge_icon_srcs %}
+ {% endwith %} -
-

Alert Banner

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

{{ section_title }}

-
- {% 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 %} + {% include "v3/includes/_badges_card.html" with badges=demo_badges %} +
+
+ {% endwith %} + + {% with section_title="Badges Card (filled — 2 badges)" %} +
+

{{ section_title }}

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

Basic Card

- {% with basic_card_data as card %} + {% with section_title="Create Account Card" %} +
+

{{ 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/_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 %} -
+
+ {% 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="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 %} +
+
- {% 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="Alert Banner" %} +
+

{{ section_title }}

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

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="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 %} -
-

Testimonial Card

-
- {% include "v3/includes/_testimonial_card.html" with heading=testimonial_data.heading testimonials=testimonial_data.testimonials %} + {% 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 %} +
-
-
-

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="Account Connections 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/_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 %}
- {% 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" %} -
-
-
-
-

Category tags

-
- {% include "v3/includes/_category_cards.html" with show_version_tags=True %} + {% endwith %} + + {% with section_title="Testimonial Card" %} +
+

{{ section_title }}

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

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

{{ section_title }}

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

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

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="#" %}
-
+ {% endwith %} + + {% with section_title="Mailing List Card" %} +
+

{{ section_title }}

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

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