Gainsight/Custom_Templates/customer_templates/Cin7 External/_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">
        <div class="card-type"><i class="far fa-graduation-cap"></i> COURSE </div>
        <h3 class="card-content-title course-name">
          {{ course.name }}
        </h3>
        <div class="course-desc">
          {{ course.short_description }}
        </div>
        <div class="course-details">
          {% if course.properties.course_duration %}
            <div class="course-time">
              <i class="far fa-clock"></i>
              {{course.properties.course_duration}} min
              </div>
            {% endif %}
            {% unless course.properties.audience == 'missing property: audience' %}
              <div class="recommended">
                <i class="far fa-users"></i>
                  {{course.properties.audience}}
              </div>
              {% endunless %}
        </div>
    </div>
    </a>
</div>