Replace tags with category for index blog cards

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog-card.html

@@ -22,16 +22,16 @@
       {% endfor %}
       </ul>
     {% else %}
-      {# Show the tag's own "main" tag (i.e. first tag in its tag list) as each blog card's visible tag #}
+      {# Show the category's own "main" category (i.e. first tag in its tag list) as each blog card's visible tag #}
 
-      {% with tag=page.specific.tags.first %}
-        {% if tag %}
-          {% if root %}
-            {# If we have a "root" context variable, we know this card is generated on an index page (or index page subroute) #}
-            <a class="main-tag d-block mt-3" href="{% routablepageurl root.specific "entries_by_tag" tag.slug %}">{{ tag }}</a>
+      {% with category=page.specific.category.first %}
+      {% if category %}
+        {% if root %}
+          {# If we have a "root" context variable, we know this card is generated on an index page (or index page subroute) #}
+          <a class="main-category body-small d-block mt-3" href="{% routablepageurl root.specific "entries_by_category" category.slug %}">{{ category }}</a>
           {% else %}
             {# If we do not have a "root" context variable, this card is being generated outside of an index page, and so needs to use its parent as root #}
-            <a class="main-tag d-block mt-3" href="{% routablepageurl page.get_parent.specific "entries_by_tag" tag.slug %}">{{ tag }}</a>
+            <a class="main-tag body-small d-block mt-3" href="{% routablepageurl page.get_parent.specific "entries_by_category" category.slug %}">{{ category }}</a>
           {% endif %}
         {% endif %}
       {% endwith %}

source/sass/views/blog.scss

@@ -19,7 +19,10 @@
 }
 
 .blog-card {
+  .main-category,
   .main-tag {
-    text-transform: capitalize;
+    @extend .text-uppercase;
+    color: $dark-blue;
+    letter-spacing: 0.5px;
   }
 }