<div class="np-card">
    <div class="np-card-container">
        <div class="np-card-image-content-top">
            {% if course.ribbon %}
              <div class="np-card-ribbon">
                {{ course.ribbon }}
              </div>
            {% endif %}

        </div>
        <img
          class="np-card-image"
          alt="{{ course.name }}"
          src="{{ course.image_url }}"
        >
        <div class="np-card-image-content-bottom">

        </div>
      </div>
   
      <div class="np-card-content np-card-content-vertical ">
        <h3 class="np-card-content-title np-color-white content-color-white">
          {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle np-color-white">
        {{ course.instructor_names }}
      </div>
      <div class="card-content-short-description content-color-white">
        {{ course.short_description }}
      </div>
          {% include "course_details" %}
        <div class="np-card-content-footer">
            {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
            {% if course.has_to_restart? %}
              {% include "course_version_outdated_popup", path: course_path %}
            {% endif %}


        </div>
    </div>
</div>

<style>


.np-card-content-subtitle{
  color: #276092;
  font-weight: 700;
  font-size: 1.2rem;
}

.content-color-white {
color: white ;
}

</style>