common/static/common/styles/_cards.sass

@@ -1,3 +1,18 @@
 .card
   @extend .box
 
+.crads-item-excerpt
+  line-height: calc(24 / 18)
+
+.cards-item-extra
+  text-transform: none
+
+  .cards-item-extra-rating-stars
+    margin-bottom: .2rem
+
+    .stars
+      font-size: 1.4rem
+
+.cards-item-title
+  +padding(0, y)
+

extensions/templates/extensions/components/card.html

@@ -1,68 +1,77 @@
 {% load common filters %}
 {% with latest=extension.latest_version %}
-
+  {# TODO: add conditional if is bg blur to web-assets component card #}
-<div class="ext-card {% if blur %}is-bg-blur{% endif %}">
+  {% comment %}
-  {% if blur %}
+  <div class="ext-card {% if blur %}is-bg-blur{% endif %}">
-  <div class="ext-card-thumbnail-blur" style="background-image: url({{ extension.previews.listed.first.source.url }});"></div>
+    {% if blur %}
-  {% endif %}
+    <div class="ext-card-thumbnail-blur" style="background-image: url({{ extension.previews.listed.first.source.url }});"></div>
-
-  <a class="ext-card-thumbnail" href="{{ extension.get_absolute_url }}">
-    <div class="ext-card-thumbnail-img" style="background-image: url({{ extension.previews.listed.first.source.url }});" title="{{ extension.name }}"></div>
-  </a>
-
-  <div class="ext-card-body">
-    <h3 class="ext-card-title">
-      <a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
-    </h3>
-    <p>
-      {{ latest.tagline }}
-    </p>
-
-    <ul class="ext-list-details">
-      <li class="ext-card-author">
-      {% if extension.team %}
-        {% with team=extension.team %}
-        <a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
-        {% endwith %}
-      {% elif extension.authors.count %}
-        {% include "extensions/components/authors.html" %}
-      {% endif %}
-      </li>
-    </ul>
-
-    <ul class="ext-list-details mt-1">
-      {% if extension.average_score %}
-      <li>
-        <a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
-        {% include "ratings/components/average.html" with score=extension.average_score %}
-        ({{ extension.text_ratings_count|int_compact }})
-        </a>
-      </li>
-      {% endif %}
-
-      {% if extension.download_count %}
-      <li title="{{ extension.download_count }} downloads">
-        <i class="i-download"></i> {{ extension.download_count | int_compact }}
-      </li>
-      {% endif %}
-
-      {% if show_type %}
-      <li class="ms-auto">
-        {{ extension.get_type_display }}
-      </li>
-      {% endif %}
-    </ul>
-
-    {% if latest.tags.count %}
-    <ul class="ext-list-details ext-card-tags">
-      <li class="ext-card-tags">
-        {% include "extensions/components/tags.html" with small=True version=latest %}
-      </li>
-    </ul>
     {% endif %}
-  </div>
 
-  {# Author/admin tools can be added here in an extending template #}
+  </div>
-  {% block admin %}{% endblock admin %}
+  {% endcomment %}
-</div>
+
+  <div class="cards-item">
+    <div class="cards-item-content">
+      <a href="{{ extension.get_absolute_url }}">
+        <div class="cards-item-thumbnail">
+          <img alt="{{ extension.name }}" src="{{ extension.previews.listed.first.source.url }}" title="{{ extension.name }}">
+        </div>
+      </a>
+      <h3 class="cards-item-title">
+        <a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
+      </h3>
+      <div class="cards-item-excerpt">
+        <p>
+          {{ latest.tagline }}
+        </p>
+      </div>
+      <div class="cards-item-extra">
+        <ul>
+          <li class="ext-card-author">
+          {% if extension.team %}
+            {% with team=extension.team %}
+            <a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
+            {% endwith %}
+          {% elif extension.authors.count %}
+            {% include "extensions/components/authors.html" %}
+          {% endif %}
+          </li>
+        </ul>
+
+        <ul class="cards-item-extra-rating-stars">
+          {% if extension.average_score %}
+          <li>
+            <a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
+            {% include "ratings/components/average.html" with score=extension.average_score %}
+            ({{ extension.text_ratings_count|int_compact }})
+            </a>
+          </li>
+          {% endif %}
+
+          {% if extension.download_count %}
+          <li title="{{ extension.download_count }} downloads">
+            <i class="i-download"></i> {{ extension.download_count | int_compact }}
+          </li>
+          {% endif %}
+
+          {% if show_type %}
+          <li class="ms-auto">
+            {{ extension.get_type_display }}
+          </li>
+          {% endif %}
+        </ul>
+
+        {% if latest.tags.count %}
+        <ul class="ext-card-tags">
+          <li class="ext-card-tags">
+            {% include "extensions/components/tags.html" with small=True version=latest %}
+          </li>
+        </ul>
+        {% endif %}
+      </div>
+    </div>
+
+    {# Author/admin tools can be added here in an extending template #}
+    {% block admin %}{% endblock admin %}
+  </div>
 {% endwith %}