Gainsight/Custom_Templates/customer_templates/Cin7 Internal/_cards_course.html.liquid

<div class="card" categories="{%for category in course.categories%}{{category.name}},{%endfor%}" duration="{{course.properties.course_duration}}">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
    <a class="lp-link" href="{{ course_path }}">
    <div class="card-image">
        <img
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
        class="learning-path-card-image"
      />
      {% if course.ribbon %}
		<div class="np-card-ribbon" {% if course.ribbon == "Omni" %} style="background: #0026b2;"
								    {% elsif course.ribbon == "Core"%} style="background: #05CBBF"
								    {% else %} style="background: #213343"
								  {% endif %}>
          {{ course.ribbon }}
        </div>
      {% endif %}
    </div>
    <div class="card-content">
        <h3 class="card-content-title course-name">
          {{ course.name }}
        </h3>
        
        <div class="course-desc">
          {{ course.short_description }}
        </div>
        {% if course.properties.course_duration %}

        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
             <div class="course-time" style="margin-right: 15px;">
                <i class="far fa-clock"></i>
                {{course.properties.course_duration}} min 
              </div>
              <div class="recommended" style="margin-left: auto;">
              Recommended for:<br>{{course.properties.recommended_for}}
        </div>
        
        </div>

         
        
        {% endif %}
    </div>
    </a>
</div>