Finalized WALMART screenshots! Maybe It can be productized.

Custom_Templates/customer_templates/Magis Center/_cards_course.html.liquid

@@ -0,0 +1,38 @@
+{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+<div class="np-card course-card">
+  <a class="np-card-container" href="{{ course_path }}">
+    {% if course.ribbon %}
+      <div class="np-card-ribbon">
+        {{ course.ribbon }}
+      </div>
+    {% endif %}
+    <img
+      class="np-card-image"
+      alt="{{ course.name }}"
+      src="{{ course.image_url }}"
+    >
+    <div class="np-card-content np-card-content-vertical np-card-padding">
+      <div class="np-card-content-subtitle">
+        {{ course.instructor_names }} {% unless course.instructor_names == "" and course.properties.course_length == "none" %}|{% endunless %} {% unless course.properties.course_length == "none" %} 30 Minutes{% endunless %}
+      </div>
+      <h3 class="np-card-content-title">
+        {{ course.name }}
+      </h3>
+      <div class="np-card-content-subtitle card-description">
+        {{course.full_description}}
+      </div>
+      <div class="np-card-content-footer">
+        {% comment %} <div class="np-card-content-progress np-button-color">
+          {% t shared.progress, count: course.progress %}
+        </div> {% endcomment %}
+        
+        {% if course.has_to_restart? %}
+          {% include "course_version_outdated_popup", path: course_path %}
+        {% endif %}
+        <div class="np-card-link">
+          {% t shared.view %} <i class="fas fa-arrow-right"></i>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>