<a href="#" class="card toolbox-main text-center d-flex align-items-center flex-column check-useability" style="min-height:120px;padding:12px;text-decoration:none;">
<span class="d-block" style="font-size:2rem;margin-bottom:8px;">🖼️</span>
<p style="font-family:'Satoshi';font-size:11px;font-weight:700;text-transform:uppercase;color:var(--title);margin:0;line-height:1.3;">Thumbnail Editor</p>
</a>
<a href="#" class="card toolbox-main text-center d-flex align-items-center flex-column check-useability" style="min-height:120px;padding:12px;text-decoration:none;">
<span class="d-block" style="font-size:2rem;margin-bottom:8px;">{{icon}}</span>
<p style="font-family:'Satoshi';font-size:11px;font-weight:700;text-transform:uppercase;color:var(--title);margin:0;line-height:1.3;">{{name}}</p>
{{#if ai}}<span class="badge ms-auto" style="margin-top:6px;">AI</span>{{/if}}
</a>
{
"icon": "🖼️",
"name": "Thumbnail Editor",
"ai": false
}
Toolbox item. Uses .card.toolbox-main. Icon is an SVG inline in the app — shown as emoji here for illustration. Tool name is uppercase, 11px, bold. AI tools show the .badge pill.
Appears in: Dashboard Toolbox section (quick-access grid), and the full Toolbox page listing all 50+ TubeSpanner tools. Clicking navigates to the tool.