Add User Card logged-out variant (boostorg#2284)

Author: julioest

static/css/v3/user-card.css

@@ -119,7 +119,7 @@
 }
 
 html.dark .user-card--green.card {
-  --user-card-cta-bg: var(--color-primary-grey-700);
+  --user-card-cta-bg: var(--color-primary-grey-800);
   --user-card-cta-bg-hover: var(--color-primary-grey-600);
 }
 
@@ -152,19 +152,86 @@ html.dark .user-card--green.card {
   font-size: var(--font-size-xl);
 }
 
+/* ==========================================================================
+   Logged-out variant (heading + description + Sign up CTA)
+   ========================================================================== */
+
+.user-card--logged-out.card {
+  --user-card-cta-bg: var(--color-surface-strong-accent-teal-default);
+  --user-card-cta-bg-hover: var(--color-surface-strong-accent-teal-hover);
+  max-width: 340px;
+  padding: 0;
+  gap: var(--space-card);
+  background-color: var(--color-surface-weak-accent-teal);
+}
+
+html.dark .user-card--logged-out.card {
+  --user-card-cta-bg: var(--color-primary-grey-800);
+  --user-card-cta-bg-hover: var(--color-primary-grey-600);
+}
+
+.user-card--logged-out .user-card__heading,
+.user-card--logged-out .user-card__description,
+.user-card--logged-out .btn-row {
+  padding-left: var(--space-card);
+  padding-right: var(--space-card);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.user-card--logged-out .user-card__heading {
+  padding-top: var(--space-card);
+}
+
+.user-card--logged-out .btn-row {
+  padding-bottom: var(--space-card);
+}
+
+.user-card--logged-out .user-card__heading {
+  color: var(--color-text-primary);
+  font-family: var(--font-display);
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-display-regular);
+  margin: 0;
+}
+
+.user-card--logged-out .user-card__description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-default);
+  letter-spacing: -0.16px;
+  margin: 0;
+}
+
 /* ==========================================================================
    Dark mode — scoped overrides
    ========================================================================== */
 
-.user-card--green .btn-green {
+.user-card--green .btn-green,
+.user-card--logged-out .btn-teal {
   background-color: var(--user-card-cta-bg);
 }
 
 .user-card--green .btn-green:hover,
-.user-card--green .btn-green[data-hover] {
+.user-card--green .btn-green[data-hover],
+.user-card--logged-out .btn-teal:hover,
+.user-card--logged-out .btn-teal[data-hover] {
   background-color: var(--user-card-cta-bg-hover);
 }
 
+/* ==========================================================================
+   Tablet
+   ========================================================================== */
+
+@media (max-width: 1024px) {
+  .user-card--logged-out.card {
+    max-width: 234px;
+  }
+}
+
 /* ==========================================================================
    Mobile
    ========================================================================== */
@@ -185,4 +252,12 @@ html.dark .user-card--green.card {
     font-size: var(--font-size-large);
   }
 
+  .user-card--logged-out.card {
+    max-width: 100%;
+  }
+
+  .user-card--logged-out .btn {
+    font-size: var(--font-size-small);
+  }
+
 }

templates/v3/examples/_v3_example_section.html

@@ -336,6 +336,15 @@ <h3>{{ section_title }}</h3>
   </div>
   {% endwith %}
 
+  {% with section_title="User Card (logged out)" %}
+  <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+    <h3>{{ section_title }}</h3>
+    <div class="v3-examples-section__example-box">
+      {% include "v3/includes/_user_card.html" with logged_out=True cta_url="#" %}
+    </div>
+  </div>
+  {% endwith %}
+
   {% with section_title="Create Account Card" %}
     <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
       <h3>{{ section_title }}</h3>

templates/v3/includes/_user_card.html

@@ -13,6 +13,9 @@
     cta_url         (string, optional)  - CTA button target URL. Omit to hide button.
     cta_label       (string, optional)  - CTA button text. Defaults to "Create Post".
     compact         (bool, optional)    - Render compact variant (no background, no CTA). Default false.
+    logged_out      (bool, optional)    - Render logged-out variant (heading, description, Sign up CTA). Default false.
+    heading         (string, optional)  - Heading text for logged-out variant.
+    description     (string, optional)  - Description text for logged-out variant.
     extra_attrs     (string, optional)  - Extra HTML attributes for analytics (rendered raw)
 
   Usage:
@@ -21,7 +24,23 @@
 
     Compact (no background, no CTA):
       {% include "v3/includes/_user_card.html" with username="vinniefalco" avatar_url="/img/avatar.png" compact=True %}
+
+    Logged out (heading, description, Sign up CTA):
+      {% include "v3/includes/_user_card.html" with logged_out=True heading="Join the Boost Community" description="Sign up to create posts, earn badges, and contribute to the community." cta_url="/sign-up/" cta_label="Sign Up" %}
 {% endcomment %}
+{% if logged_out %}
+<section class="user-card user-card--logged-out card" aria-label="{{ heading|default:"Create an account" }}" {{ extra_attrs|safe }}>
+  <h3 class="user-card__heading">{{ heading|default:"Create an account" }}</h3>
+  <hr class="card__hr">
+  <p class="user-card__description">{{ description|default:"Advance your career, learn from experts, and help shape the future of Boost and C++." }}</p>
+  {% if cta_url %}
+    <hr class="card__hr">
+    <div class="btn-row">
+      {% include "v3/includes/_button.html" with url=cta_url label=cta_label|default:"Sign up now" style="teal" extra_classes="btn-flex" %}
+    </div>
+  {% endif %}
+</section>
+{% else %}
 <section class="user-card {% if compact %}user-card--compact{% else %}user-card--lg user-card--green{% endif %} card" aria-label="{{ username }}" {{ extra_attrs|safe }}>
 
   {# Avatar with flag overlay #}
@@ -62,3 +81,4 @@
   {% endif %}
 
 </section>
+{% endif %}