TubeSpanner Style Guide

Video Card: No view data 

<div class="card h-100 t-hover" style="max-width:280px;">
    <div class="img-figure" style="background:var(--primary-light);border-radius:8px 8px 0 0;overflow:hidden;aspect-ratio:16/9;">
        <img src="https://picsum.photos/seed/vid2/400/225" alt="My first video" style="width:100%;height:100%;object-fit:cover;">
    </div>
    <div class="card-info d-flex flex-column" style="padding:12px;">
        <h4 style="font-size:0.875rem;margin-bottom:4px;color:var(--title);">My first video</h4>
        <small style="color:var(--paragraph);">01 Mar 2024</small>
    </div>
</div>
 
<div class="card h-100 t-hover" style="max-width:280px;">
  <div class="img-figure" style="background:var(--primary-light);border-radius:8px 8px 0 0;overflow:hidden;aspect-ratio:16/9;">
    {{#if thumbnail}}
    <img src="{{thumbnail}}" alt="{{title}}" style="width:100%;height:100%;object-fit:cover;">
    {{else}}
    <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--paragraph);">No thumbnail</div>
    {{/if}}
  </div>
  <div class="card-info d-flex flex-column" style="padding:12px;">
    <h4 style="font-size:0.875rem;margin-bottom:4px;color:var(--title);">{{title}}</h4>
    <small style="color:var(--paragraph);">{{date}}{{#if views}} · {{views}} views{{/if}}</small>
  </div>
</div>
 
{
  "title": "My first video",
  "date": "01 Mar 2024",
  "views": null,
  "thumbnail": "https://picsum.photos/seed/vid2/400/225"
}

Used on dashboard “Top Videos” and “Recent Videos” sections. 16:9 thumbnail ratio. Always use .t-hover for hover lift. Falls back to placeholder if no thumbnail.

Appears in: Dashboard Top Videos list, Homerun Analysis (top performing videos), Script Library (linked videos), Competitor Analysis (competitor video list).