Dev -> QA

core/views.py

@@ -1442,6 +1442,20 @@ def get_context_data(self, **kwargs):
             )
             if lv:
                 context["library_intro"] = build_library_intro_context(lv)
+                deps = lv.dependencies.order_by("name")
+                context["dependencies_card_data"] = [
+                    {
+                        "name": dep.display_name_short,
+                        "url": reverse(
+                            "library-detail",
+                            kwargs={
+                                "version_slug": "latest",
+                                "library_slug": dep.slug,
+                            },
+                        ),
+                    }
+                    for dep in deps
+                ]
 
         # Commits per release: dropdown of libraries, Beast first and default
         raw_library = self.request.GET.get("library")

static/css/v3/badge.css

@@ -6,8 +6,9 @@
 .badge-v3 {
   width: 16px;
   height: 16px;
-  display: grid;
-  place-items: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   aspect-ratio: 1 / 1;
   box-sizing: border-box;
   border-radius: var(--s, 4px);

static/css/v3/badges-card.css

@@ -37,14 +37,14 @@
 
 .badges-card__name {
   color: var(--color-text-primary, #050816);
-  font-size: var(--font-size-base, 16px);
+  font-size: var(--font-size-xs, 12px);
   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-size: var(--font-size-xs, 12px);
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-default, 1.2);
 }

static/css/v3/components.css

@@ -34,3 +34,4 @@
 @import "./account-connections.css";
 @import "./dialog.css";
 @import "./achivement-card.css";
+@import "./dependencies-card.css";

static/css/v3/dependencies-card.css

@@ -0,0 +1,27 @@
+/*
+    Dependencies Card — extends .card base
+    Lists library dependencies as clickable yellow tags in a wrapping row.
+
+    dependencies-card              — yellow background + max-width override
+    dependencies-card__tags        — wrapping flex container for tags
+    dependencies-card__empty       — empty state message
+*/
+
+.dependencies-card {
+  max-width: 458px;
+  padding: var(--space-large, 16px);
+  background: var(--color-surface-weak-accent-yellow, #fbeba9);
+}
+
+.dependencies-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-s, 4px);
+}
+
+.dependencies-card__empty {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}

templates/v3/examples/_v3_example_section.html

@@ -432,6 +432,17 @@ <h3>{{ section_title }}</h3>
     </div>
   {% endwith %}
 
+  {% with section_title="Dependencies Card" %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+      <h3>{{ section_title }}</h3>
+      <div class="v3-examples-section__example-box">
+        {% include "v3/includes/_dependencies_card.html" with dependencies=dependencies_card_data %}
+        <br>
+        {% include "v3/includes/_dependencies_card.html" with dependencies='' %}
+      </div>
+    </div>
+  {% endwith %}
+
   {% with section_title="Testimonial Card" %}
     <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
       <h3>{{ section_title }}</h3>

templates/v3/includes/_badges_card.html

@@ -52,7 +52,7 @@
     {% if cta_url %}
     <div class="btn-row">
       {% 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" %}
+      {% include "v3/includes/_button.html" with url=cta_url label=cta_label|default:default_cta style="primary" extra_classes="btn-flex" %}
       {% endwith %}
     </div>
     {% endif %}

templates/v3/includes/_category_tag.html

@@ -7,6 +7,7 @@
     url         (optional) — if set, renders <a href="...">; if omitted, renders <span> (e.g. version tags)
     variant     (required) — "neutral" | "green" | "yellow" | "teal"
     size        (optional) — "default" | "tight", default "default"
+    target      (optional) — link target attribute (e.g. "_blank"); adds rel="noopener noreferrer" when set
     show_hover  (optional) — if truthy, adds category-tag--hover-state for hover preview in docs
     aria_label  (optional) — for links, accessible name (e.g. "Filter by category: Math"). Defaults to "Filter by category: {{ tag_label }}".
 
@@ -16,7 +17,7 @@
     {% include "v3/includes/_category_tag.html" with tag_label="C++ 03" variant="neutral" size="default" %}
 {% endcomment %}
 {% if url %}
-<a href="{{ url }}" class="category-tag category-tag--{{ variant }} category-tag--{{ size|default:'default' }}{% if show_hover %} category-tag--hover-state{% endif %}" aria-label="{% if aria_label %}{{ aria_label }}{% else %}Filter by category: {{ tag_label }}{% endif %}">{{ tag_label }}</a>
+<a href="{{ url }}" class="category-tag category-tag--{{ variant }} category-tag--{{ size|default:'default' }}{% if show_hover %} category-tag--hover-state{% endif %}"{% if target %} target="{{ target }}" rel="noopener noreferrer"{% endif %} aria-label="{% if aria_label %}{{ aria_label }}{% else %}Filter by category: {{ tag_label }}{% endif %}">{{ tag_label }}</a>
 {% else %}
 <span class="category-tag category-tag--{{ variant }} category-tag--{{ size|default:'default' }}{% if show_hover %} category-tag--hover-state{% endif %}">{{ tag_label }}</span>
 {% endif %}

templates/v3/includes/_dependencies_card.html

@@ -0,0 +1,29 @@
+{% comment %}
+  Dependencies Card — lists library dependencies as clickable tags.
+  Extends the base .card component.
+
+  Variables:
+    heading       (optional) — card heading text, defaults to "Dependencies"
+    dependencies  (required) — list of dicts, each with:
+                    "name"  (str)  — display name of the dependency (e.g. "Asio")
+                    "url"   (str)  — link to the dependency's library page
+    extra_classes (optional) — additional CSS classes on the outer card
+
+  Usage:
+    {% include "v3/includes/_dependencies_card.html" with dependencies=dep_list %}
+    {% include "v3/includes/_dependencies_card.html" with heading="Depends on" dependencies=dep_list %}
+{% endcomment %}
+
+<div class="card dependencies-card{% if extra_classes %} {{ extra_classes }}{% endif %}">
+  <h3 class="card__title">{{ heading|default:"Dependencies" }}</h3>
+
+  {% if dependencies %}
+  <div class="dependencies-card__tags">
+    {% for dep in dependencies %}
+      {% include "v3/includes/_category_tag.html" with tag_label=dep.name url=dep.url variant="yellow" size="tight" aria_label=dep.name %}
+    {% endfor %}
+  </div>
+  {% else %}
+  <p class="dependencies-card__empty">No dependencies</p>
+  {% endif %}
+</div>