Refactor Post Card & Event Card

[julhoang]

Summary & Context

Refactor post-card and event-card components into a shared _card_group.html base template using Django template inheritance , and add a new "card" variant for Post Cards (previously only "list" existed). This PR also cleans up widespread misuse of post-cards CSS classes across unrelated components (event cards, testimonial cards, carousel, examples section).

Component	Figma Link	Component Link
Post Card	Figma	#post-cards-list-this-only-have-1-theme
Event Card	Figma	#event-cards-list-this-only-have-1-theme
Testimonial Card	Figma	#testimonial-card
Cards Carousel	Figma	#detail-card-carousel
Buttons	Figma	#buttons

Changes

• ⭐️ Add _card_group.html base template that provides the shared shell (heading, list slot, CTA section) via {% block card_list %} — consumers extend it to render their own items for the card body.
  • Add card-group.css with shared container styles, theme variants (default, yellow, green, teal), card vs list variants, horizontal layout, and dark mode
• Add _post_card.html extending _card_group.html with support for both variant="list" and variant="card" layouts, plus theme and layout options
• Add _event_card.html extending _card_group.html to render event items
  • Add post-card.css and event-card.css as ⭐️ focused, single-card stylesheets ⭐️
• Refactor _testimonial_card.html to use its own carousel markup instead of depending on post-cards classes; improve heading semantics and aria attributes
• Refactor _cards_carousel_v3.html — extract carousel styles into standalone cards-carousel.css, removing dependency on post-cards.css
• Update buttons.css to use semantic tokens for secondary hover and add dark-mode overrides for colored button variants

Notable Components Affected

• templates/v3/includes/_card_group.html (new)
• templates/v3/includes/_post_card.html (new, replaces _post_card_v3.html + _post_cards_v3.html)
• templates/v3/includes/_event_card.html (new, replaces _event_cards.html + _event_cards_section.html + _content_event_card_item.html)
• templates/v3/includes/_testimonial_card.html (refactored to include _testimonial_card_quote.html)
• templates/v3/includes/_cards_carousel_v3.html (refactored)
• static/css/v3/card-group.css (new)
• static/css/v3/post-card.css (new, replaces post-cards.css)
• static/css/v3/event-card.css (new, replaces event-cards.css)
• static/css/v3/cards-carousel.css (new, extracted from post-cards.css)

‼️ Risks & Considerations ‼️

This refactor would require a re-QA on all of the impacted components.

Screenshots (Staging left VS localhost right)

The best way to compare Before & After in this case is probably to put these Staging side-by-side with localhost.

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket - currently untracked

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[herzog0]

@julhoang could you point me to the figma component link related to card groups, please?
I'm just trying to understand where these measures are coming from, like 933px exactly.

[julhoang]

@herzog0 Yes sure thing – Figma link.

Also #naming-is-hard, if you have any suggestion for a better component name for card-group please let me know 😅 I understand the current one is not the most intuitive but it's the best I could come up with

[herzog0]

This is some really great work, awesome use of template inheritance, it makes everything much more organized and concise. Thanks a ton @julhoang!!

[herzog0]

@julhoang sorry for only noticing this now, but can we take the opportunity to also improve our DX a little bit?

Right now, since the components are asking for flat variables instead of a dict containing all the properties, using these components can be a little verbose.

For example, taking the _card_group.html as an example:

{% if heading or items %}
  <section class="card-group card-group--{{ variant|default:'list' }}{% if variant == 'card' %} card-group--{{ theme|default:'default' }}{% endif %} card-group--{{ layout|default:'vertical' }}"{% if heading %} aria-labelledby="card-group-{{ heading|slugify }}"{% endif %}>
    {% if heading %}
      <h2 class="card-group__heading" id="card-group-{{ heading|slugify }}">{% if heading_url %}<a href="{{ heading_url }}">{{ heading }}</a>{% else %}{{ heading }}{% endif %}</h2>
    {% endif %}
    {% block card_list %}
      {# Consumers will fill this block with their item loop #}
    {% endblock %}
    {% if primary_cta_url or secondary_cta_url %}
      <div class="card__cta_section">
        {% if primary_cta_url %}
          {% include "v3/includes/_button.html" with label=primary_cta_label url=primary_cta_url style=theme|default:"primary" only %}
        {% endif %}
        {% if secondary_cta_url %}
          {% include "v3/includes/_button.html" with label=secondary_cta_label url=secondary_cta_url style="secondary" only %}
        {% endif %}
      </div>
    {% endif %}
  </section>
{% endif %}

Right now, if we want to use a _post_card, we have to be fully explicit with the arguments being passed, like:

{% with d=posts_from_the_boost_community %}
  {% include "v3/includes/_post_card.html" with heading=d.heading items=d.items variant=d.variant theme=d.theme primary_cta_label=d.primary_cta_label primary_cta_url=d.primary_cta_url %}
{% endwith %}

But notice how the backend is already hydrating all the properties with the same specified names in the _card_group and _post_card definitions, so it'd be much better if we could just say:

{% include "v3/includes/_post_card.html" with data=posts_from_the_boost_community only %}

For that to work you'd have to update the components to use a data. parameter prefix on every property.

Let me know your thoughts!

Changed my mind, as this verbosity is a design choice by Django

[kattyode]

QA Validation note:

All the components: Post Card, Event Card, Testimonial Card, Cards Carousel and Buttons are working as expected.