Bug: Learn Page correct post card and community card display issues

Author: jlchilders11

core/views.py

@@ -541,16 +541,8 @@ def get_v3_context_data(self, **kwargs):
                 {
                     "title": "A talk by Richard Thomson at the Utah C++ Programmers Group",
                     "description": "Lorem Ispum Sum Delores",
-                    "url": "#",
-                    "date": "03/03/2025",
-                    "category": "Issues",
-                    "tag": "beast",
-                    "author": {
-                        "name": "Richard Thomson",
-                        "role": "Contributor",
-                        "show_badge": True,
-                        "avatar_url": "/static/img/v3/demo_page/Avatar.png",
-                    },
+                    "cta_url": "#",
+                    "cta_label": "Learn More",
                 }
             ],
         }

static/css/v3/community-card.css

@@ -0,0 +1,50 @@
+/*
+  Community Card
+  Individual community card item styles used within card-group containers.
+*/
+
+.community-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-medium);
+    padding: var(--space-card);
+    font-family: var(--font-sans);
+    color: var(--color-text-primary);
+    transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.community-card__title {
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-default);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--color-text-primary);
+}
+
+.community-card__description {
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-default);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--color-text-secondary);
+}
+
+.community-card__link {
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    text-decoration-line: underline;
+    text-decoration-skip-ink: none;
+    text-underline-position: from-font;
+}

static/css/v3/components.css

@@ -54,3 +54,4 @@
 @import "./library-discovery-card.css";
 @import "./help-card.css";
 @import "./quick-start-card.css";
+@import "./community-card.css";

templates/v3/includes/_community_card.html

@@ -0,0 +1,48 @@
+{% extends "v3/includes/_card_group.html" %}
+{% comment %}
+  Community Card — extends _card_group.html to render community connection items.
+
+  Variables (passed to _card_group.html):
+    heading             (string, optional)  — section heading text
+    heading_url         (string, optional)  — if set, heading becomes a link
+    items               (list, optional)    — list of event objects with:
+      - title           (string, required)  — event title
+      - description     (string, optional)  — event description
+      - date            (string, required)  — human-readable date (e.g. "29/10/25")
+      - datetime        (string, optional)  — value for <time datetime="...">
+      - card_url        (string, optional)  — if set, the card is wrapped in a link
+      - card_aria_label (string, optional)  — aria-label for the link; defaults to title
+    variant             (string, optional)  — "list" or "card", defaults to "list"
+    theme               (string, optional)  — only for variant "card": "default", "grey", "yellow", "green", "teal"
+    layout              (string, optional)  — "vertical" or "horizontal", defaults to "vertical"
+    primary_cta_label   (string, optional)  — primary CTA button label
+    primary_cta_url     (string, optional)  — primary CTA button URL
+    secondary_cta_label (string, optional)  — secondary CTA button label
+    secondary_cta_url   (string, optional)  — secondary CTA button URL
+
+  Usage:
+    {% include "v3/includes/_event_card.html" with heading="Upcoming Events" items=events variant="card" theme="teal" primary_cta_label="View events" primary_cta_url="/events/" %}
+{% endcomment %}
+{% block card_list %}
+{% if items %}
+  <ul class="card-group__list">
+    {% for item in items %}
+      <li class="card-group__item">
+          <article class="community-card">
+              <h3 class="community-card__title">{{ item.title }}</h3>
+              {% if item.description %}
+                <p class="community-card__description">{{ item.description }}</p>
+              {% endif %}
+              {% if item.cta_url and item.cta_label %}
+              <a href="{{ item.cta_url }}"
+                  class="community-card__link"
+                  aria-label="{{ item.card_aria_label|default:item.cta_label }}">
+                {{item.cta_label}}
+              </a>
+              {% endif %}
+          </article>
+          </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+{% endblock %}

templates/v3/learn_page.html

@@ -30,12 +30,12 @@ <h1>Start anywhere. Learn everything. Build anything.</h1>
     <div class="card-masonry py-large">
       <div class="item-a">
         {% with data=post_cards_data %}
-          {% include 'v3/includes/_post_cards_v3.html' with heading=data.heading posts=data.posts view_all_url=data.view_all_url view_all_label=data.view_all_label theme='teal' variant="content-card" %}
+          {% include 'v3/includes/_post_card.html' with heading=data.heading items=data.posts primary_cta_url=data.view_all_url primary_cta_label=data.view_all_label theme='teal' variant="card" %}
         {% endwith %}
       </div>
       <div class="item-b">
         {% with data=boost_community_data %}
-          {% include 'v3/includes/_post_cards_v3.html' with heading=data.heading posts=data.posts view_all_url=data.view_all_url view_all_label=data.view_all_label %}
+          {% include 'v3/includes/_community_card.html' with heading=data.heading items=data.posts primary_cta_url=data.view_all_url primary_cta_label=data.view_all_label %}
         {% endwith %}
       </div>
       <div class="item-d">