program_card.underscore

<div class="text-section">
    <h3 id="program-<%- uuid %>" class="title hd-3"><%- gettext(title) %></h3>
    <div class="meta-info grid-container">
        <div class="organization col"><%- orgList %></div>
        <div class="category col col-last">
            <span class="category-text"><%- gettext(type) %></span>
            <span class="category-icon <%- type.toLowerCase() %>-icon" aria-hidden="true"></span>
        </div>
    </div>
</div>
<% if (progress) { %>
    <div class="status-text">
        <div class="number-status">
            <div class="number-circle completed"><%- progress.completed %></div>
            <span class="sr-only">
                <%- ngettext('Course', 'Courses', progress.completed) %>
            </span>
            <%- gettext('Completed') %>
        </div>

        <div class="number-status">
            <div class="number-circle enrolled"><%- progress.in_progress %></div>
            <span class="sr-only">
                <%- ngettext('Course', 'Courses', progress.in_progress) %>
            </span>
            <%- gettext('In Progress') %>
        </div>

        <div class="number-status">
            <div class="number-circle not-enrolled"><%- progress.not_started %></div>
            <span class="sr-only">
                <%- ngettext('Course', 'Courses', progress.not_started) %>
            </span>
            <%- gettext('Remaining') %>
        </div>
    </div>
<% } %>
<% if (progress) { %>
    <div class="progress-container">
      <div class="progress-bar">
        <% _.times(progress.completed, function() { %>
            <div class="item completed"></div>
        <% }) %>
        <% _.times(progress.in_progress, function() { %>
            <div class="item enrolled"></div>
        <% }) %>
        <% _.times(progress.not_started, function() { %>
            <div class="item not-enrolled"></div>
        <% }) %>
      </div>
    </div>
<% } %>
<a href="<%- detailUrl %>" class="card-link">
    <div class="banner-image-container">
        <picture>
            <source srcset="<%- xsmallBannerUrl %>" media="(max-width: <%- breakpoints.max.xsmall %>)">
            <source srcset="<%- smallBannerUrl %>" media="(max-width: <%- breakpoints.max.small %>)">
            <source srcset="<%- mediumBannerUrl %>" media="(max-width: <%- breakpoints.max.medium %>)">
            <source srcset="<%- xsmallBannerUrl %>" media="(max-width: <%- breakpoints.max.large %>)">
            <img class="banner-image" srcset="<%- smallBannerUrl %>" alt="<%= interpolate(gettext('%(programName)s Home Page.'), {programName: title}, true)%>">
        </picture>
    </div>
</a>