<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;">
<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--paragraph);">No thumbnail</div>
</div>
<div class="card-info d-flex flex-column" style="padding:12px;">
<h4 style="font-size:0.875rem;margin-bottom:4px;color:var(--title);">Getting started with TubeSpanner</h4>
<small style="color:var(--paragraph);">14 Jan 2024 · 68 views</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": "Getting started with TubeSpanner",
"date": "14 Jan 2024",
"views": "68",
"thumbnail": null
}
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).