Improve user profile page

kitsune/sumo/jinja2/sumo/includes/entity_card.html

@@ -0,0 +1,31 @@
+{# Shared sidebar summary card for a person or group: avatar, name, an
+   optional username/meta line, an optional location line, an optional
+   primary action, and — when called with {% call %} — a .stat-list slot
+   wrapping whatever stats markup the caller supplies.
+
+   This macro only owns the entity's own identity summary. Quick actions,
+   moderator tools, and hierarchy info are separate cards the caller places
+   alongside it, not more arguments here.
+
+   Usage:
+     {% from "sumo/includes/entity_card.html" import entity_card %}
+     {% call entity_card(avatar_url, name, location=city) %}
+       <p>Whatever stats markup belongs in this entity's card.</p>
+     {% endcall %}
+#}
+{% macro entity_card(avatar_url, name, username=None, location=None, primary_action=None) %}
+{# location/primary_action are often captured via {% set x %}...{% endset %}
+   blocks whose inner {% if %} didn't match — that leaves whitespace, not an
+   empty string, so check the stripped content rather than truthiness. #}
+<div class="entity-card card elevation-01">
+  <img class="entity-card--avatar" src="{{ avatar_url }}" alt="">
+  <h2 class="entity-card--name">{{ name }}{% if username %} <span class="username">({{ username }})</span>{% endif %}</h2>
+  {% if location and location.strip() %}<h2 class="entity-card--location">{{ location.strip() }}</h2>{% endif %}
+  {% if primary_action and primary_action.strip() %}<div class="entity-card--action">{{ primary_action }}</div>{% endif %}
+  {% if caller %}
+  <div class="stat-list">
+    {{ caller() }}
+  </div>
+  {% endif %}
+</div>
+{% endmacro %}

kitsune/sumo/static/sumo/scss/components/_entity-card.scss

@@ -0,0 +1,78 @@
+@use '../config' as c;
+@use 'protocol/css/includes/lib' as p;
+
+// Entity card
+//
+// A sidebar summary card for a person or group: avatar, name, an optional
+// meta line, an optional primary action, and an optional .stat-list of
+// stat-item rows.
+//
+// Markup: ../../../../../../styleguide/styleguide-examples/entity-card.njk
+//
+// Weight: 6
+//
+// Style guide: entity-card
+
+// Base card look (padding, radius, shadow) comes from the shared .card and
+// .elevation-01 classes applied alongside this one in markup — only the
+// bits specific to this component live here.
+.entity-card {
+  margin-bottom: p.$spacing-lg;
+  background: white;
+  text-align: center;
+
+  &--avatar {
+    display: block;
+    width: 96px;
+    height: 96px;
+    margin: 0 auto p.$spacing-sm;
+    border-radius: 50%;
+    border: 3px solid var(--color-marketing-gray-03);
+    object-fit: cover;
+  }
+
+  &--name {
+    @include c.sumo-callout-heading('no-fam');
+    margin: 0 0 2px;
+    // A long display name or username (often one unbroken word) has no
+    // natural wrap point, and as a flex item this card won't shrink below
+    // that text's width by default — it forces the sidebar column wider
+    // than its assigned width instead of wrapping.
+    overflow-wrap: anywhere;
+  }
+
+  &--location {
+    @include c.text-body-sm;
+    color: var(--color-marketing-gray-06);
+    margin: 0;
+    font-weight: normal;
+    overflow-wrap: anywhere;
+  }
+
+  &--action {
+    margin-top: p.$spacing-md;
+
+    .sumo-button {
+      width: 100%;
+    }
+  }
+
+  &--secondary-link {
+    display: block;
+    margin-top: p.$spacing-xs;
+    @include c.text-body-xs;
+    color: var(--color-marketing-gray-06);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-link);
+    }
+  }
+
+  .stat-list {
+    margin-top: p.$spacing-md;
+    padding-top: p.$spacing-md;
+    border-top: 1px solid var(--color-marketing-gray-03);
+    text-align: left;
+  }
+}

kitsune/sumo/static/sumo/scss/components/_index.scss

@@ -22,4 +22,5 @@
 @forward 'dashboards';
 @forward 'flaggit';
 @forward 'groups';
-@forward 'field-help-text';
+@forward 'field-help-text';
+@forward 'entity-card';