card.ejs

```{=html}

<%
// Number of columns
const cols = 3;
%>

<div class="list grid quarto-listing-cols-<%=cols%>">
<% for (const item of items) { %>
  <div class="g-col-1" <%= metadataAttrs(item) %>>
    <div class="quarto-grid-item card h-100 card-left" style="padding-top: 0.5em; padding-left: 0.5em; background-color: #7b8a8b; color: #ffffff;">
    <h3 class="no-anchor card-title listing-title" style="padding-bottom: 3.5em;"><%= item.text %></h3>
    <% if ('content') { %> 
      <p class="card-content listing-content" style="padding-bottom: 1em; position: absolute; bottom: 0;"><%= item.content %></p>
    <% } %>
    <button type="button" onclick="window.open('<%= item.href %>', '_blank');" target = "_blank" style="position: absolute; bottom: 0.3em; left: 0; right: 0; margin: 0 auto; background-color: #2c3e50; border: none; color: #ccd1d5;">View</button>
    </div>
  </div>
<% } %>
</div>
```