Gainsight/Custom_Templates/customer_templates/G2/_cards_course.html.liquid

{% assign activities_count = 0 %}
{% for course_section in course.sections %}
  {% for course_activity in course_section.activities %}
    {% assign activities_count = activities_count | plus: 1 %}
  {% endfor %}
{% endfor %} 
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="np-card">
  <div class="np-card-container">
    <a href="{{ course_path }}">
      <img
        class="np-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </a>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <a class="np-card-content-title" href="{{ course_path }}">
        {{ course.name }}
      </a>
      <div class="np-card-content-subtitle">
        {{ course.short_description }}
      </div>
      <a class="np-card-content-lessons" href="{{course_path}}#course-overview">
        {{ activities_count }} {% if activities_count == 1 %}Lesson{% else %}Lessons{% endif %}
      </a>
    </div>
  </div>
</div>

<style>
  .np-card {
    padding: 25px 30px !important;
  }

  .np-card-content {
    padding: 16px 25px 25px;
  }

  .np-card-container {
    box-shadow: 0px 0px 0px 1px #d8d8d8 inset;
    border-radius:8px;
  }

  .np-card-content-title {
    color: rgb(38, 49, 61);
    font-size: 24px;
    line-height:26px;
    font-weight: 800;
    text-decoration: none;
    margin: 10px 0 20px;
    overflow: clip;
  }

  .np-card-content-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: rgba(0,0,0,.75);
    height: 100px;
  }

  .np-card-content-lessons {
    color: rgb(38, 49, 61);
    font-weight: 800;
    font-size: 16px;
    margin-top: 20px;
    line-height: 22px;
    text-decoration: none;
  }





  

  /*.np-card-content-footer {
    margin-top: 40px;
  }

  .np-button {
    height: 53px;
    border-radius: 100px;
    padding: 12px 45px;
  }
  
  .np-card-content-progress {
    font-size: 18px;
    margin: auto 0;
  }*/

  @media (min-width:768px) {
    .np-card-content-title {
      font-size: 28px;
      line-height:26px;
    }

    .np-card-content-lessons {
      font-size: 21px;
      line-height: 29px;
    }
  }

</style>