balanceboard/themes/modern-card-ui/card-template.html

<!-- Modern Card UI - Post Card Template -->
<template id="modern-card-template">
  <article class="post-card" data-post-id="{{id}}" data-platform="{{platform}}">
    <div class="card-surface">
      <!-- Header -->
      <header class="card-header">
        <div class="header-meta">
          <span class="platform-badge platform-{{platform}}">{{platform|upper}}</span>
          {% if source %}
            <span class="card-source">{{source}}</span>
          {% endif %}
        </div>

        <div class="vote-indicator">
          <span class="vote-score">{{score}}</span>
          <span class="vote-label">pts</span>
        </div>
      </header>

      <!-- Title -->
      <div class="card-title-section">
        <h2 class="card-title">
          <a href="{{post_url}}" class="title-link">{{title}}</a>
        </h2>
      </div>

      <!-- Content Preview -->
      {% if content %}
      <div class="card-content-preview">
        <p class="content-text">{{ truncate(content, 150) }}</p>
      </div>
      {% endif %}

      <!-- Footer -->
      <footer class="card-footer">
        <div class="author-info">
          <span class="author-name">{{author}}</span>
          <span class="post-time">{{formatTimeAgo(timestamp)}}</span>
        </div>

        <div class="engagement-info">
          <span class="reply-count">{{replies}} replies</span>
        </div>
      </footer>

      <!-- Tags -->
      {% if tags %}
      <div class="card-tags">
        {% for tag in tags[:3] if tag %}
          <span class="tag-chip">{{tag}}</span>
        {% endfor %}
        {% if tags|length > 3 %}
          <span class="tag-more">+{{tags|length - 3}} more</span>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </article>
</template>