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

<style>
  .np-card-content-subtitle{
    color: #276092;
    font-weight: 700;
    font-size: 1.1rem;
  }
</style>

