TubeSpanner Style Guide

Card: Single (highlight) 

<div class="card card-single" style="max-width:240px;">
    <div class="card-info d-flex flex-column" style="padding:0;">
        <h4 style="margin-bottom:8px;">Total views</h4>
        <p style="color:var(--paragraph);font-size:0.875rem;margin-bottom:12px;">12,450 views this month</p>
    </div>
</div>
 
<div class="card{{#if single}} card-single{{/if}}{{#if hover}} t-hover{{/if}}" style="{{#if maxWidth}}max-width:{{maxWidth}};{{/if}}">
  {{#if image}}
  <div class="img-figure">
    <img src="{{image}}" alt="{{imageAlt}}" style="width:100%;border-radius:8px 8px 0 0;object-fit:cover;max-height:160px;">
  </div>
  {{/if}}
  <div class="card-info d-flex flex-column" style="padding:{{#if single}}0{{else}}12px{{/if}};">
    {{#if title}}<h4 style="margin-bottom:8px;">{{title}}</h4>{{/if}}
    {{#if body}}<p style="color:var(--paragraph);font-size:0.875rem;margin-bottom:12px;">{{body}}</p>{{/if}}
    {{#if action}}
    <a href="#" class="btn btn-primary" style="margin-top:auto;">{{action}}</a>
    {{/if}}
  </div>
</div>
 
{
  "title": "Total views",
  "body": "12,450 views this month",
  "image": null,
  "action": null,
  "single": true,
  "hover": false,
  "maxWidth": "240px"
}

Base card component. Three variants:

  • Default (.card) — white background, 12px border-radius, no border.
  • Single (.card-single) — light purple background (--primary-light), 8px border-radius. Use for stats and highlights.
  • Hover (add .t-hover) — adds a lift/shadow on hover. Use for clickable cards.