Gainsight/Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_recommended.html.liquid

<div class="courses container width-limit">
  <section class="courses-section">
    <h3 class="courses-title strong">
      <span class="lang-en">Don’t know where to start? We recommend these</span>
      <span class="lang-de">Sie wissen nicht, wo Sie anfangen sollen? Wir empfehlen</span>
      <span class="lang-es">¿No sabe por dónde empezar? Le recomendamos</span>
      <span class="lang-fr">Vous ne savez pas par où commencer ? Voici nos recommandations.</span>
      <span class="lang-br">Não sabe por onde começar? Recomendamos estes</span>
    </h3>
    {% assign any_course = false %}
    <div class="courses-list row">
      {% for course in courses.in_catalog %}
        {% if course.properties.recommended_for_new_learner %}
          {% assign any_course = true %}
          {% if course.ribbon == 'VIDEO' %}
            {% include 'cards_video' %}
          {% else %}
            {% include 'cards_course' %}
          {% endif %}
        {% endif %}
      {% endfor %}
    </div>
  </section>
</div>

{% unless any_course %}
  <style>
    .courses {
      display: none;
    }
  </style>
{% endunless %}

<style>
  .courses-title {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  
  @media only screen and (min-width: 768px) {
    .courses {
      padding-top: 40px;
    }
    .courses-list > div {
      padding-left: 15px;
      padding-right: 15px;
    }
    .courses-list .video-card .course-card-content {
      margin-top: 31.6px;
    }
    .courses .course-card {
      padding-bottom: 0;
    }
  }
</style>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.course-card-description').forEach((x) => {
      $clamp(x, {clamp: 5});
    })
  })
</script>