<div class="card" style="font-family:'Satoshi',sans-serif;overflow:hidden;max-width:320px;">
<div style="aspect-ratio:3/2;background:#f97316;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;">
<div style="width:48px;height:48px;border-radius:50%;background:var(--primary-color);border:3px solid #fff;margin-bottom:8px;overflow:hidden;flex-shrink:0;">
</div>
<div style="font-size:0.75rem;font-weight:700;color:#ffffff;margin-bottom:4px;">My Channel</div>
<div style="display:flex;flex-direction:column;gap:4px;width:100%;max-width:160px;">
<div style="height:18px;border-radius:4px;background:rgba(255,255,255,0.9);opacity:0.85;"></div>
<div style="height:18px;border-radius:4px;background:rgba(255,255,255,0.9);opacity:0.85;"></div>
<div style="height:18px;border-radius:4px;background:rgba(255,255,255,0.9);opacity:0.85;"></div>
<div style="height:18px;border-radius:4px;background:rgba(255,255,255,0.9);opacity:0.85;"></div>
</div>
<div style="position:absolute;bottom:6px;right:8px;font-size:0.5rem;font-weight:700;color:#ffffff;opacity:0.4;letter-spacing:0.05em;">TUBESPANNER</div>
</div>
<div style="padding:12px 14px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
<div style="font-size:0.875rem;font-weight:700;color:var(--title);">My Bio Page</div>
<span style="font-size:0.65rem;font-weight:700;color:#22c55e;background:#f0fdf4;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:0.04em;">Live</span>
</div>
<div style="font-size:0.75rem;color:var(--paragraph);margin-bottom:10px;">tubespanner.com/bio/mypage</div>
<div style="display:flex;gap:8px;">
<a href="#" class="btn btn-primary" style="font-size:0.75rem;padding:5px 12px;">Edit</a>
<a href="#" class="btn btn-light" style="font-size:0.75rem;padding:5px 12px;">View</a>
</div>
</div>
</div>
<div class="card" style="font-family:'Satoshi',sans-serif;overflow:hidden;max-width:320px;">
{{! Preview thumbnail }}
<div style="aspect-ratio:3/2;background:{{bgColor}};position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;">
{{! Avatar }}
<div style="width:48px;height:48px;border-radius:50%;background:var(--primary-color);border:3px solid #fff;margin-bottom:8px;overflow:hidden;flex-shrink:0;">
{{#if avatarSrc}}<img src="{{avatarSrc}}" style="width:100%;height:100%;object-fit:cover;">{{/if}}
</div>
{{! Name }}
<div style="font-size:0.75rem;font-weight:700;color:{{textColor}};margin-bottom:4px;">{{channelName}}</div>
{{! Link buttons preview }}
<div style="display:flex;flex-direction:column;gap:4px;width:100%;max-width:160px;">
{{#each previewLinks}}
<div style="height:18px;border-radius:4px;background:{{this.color}};opacity:0.85;"></div>
{{/each}}
</div>
{{#if watermark}}
<div style="position:absolute;bottom:6px;right:8px;font-size:0.5rem;font-weight:700;color:{{textColor}};opacity:0.4;letter-spacing:0.05em;">TUBESPANNER</div>
{{/if}}
</div>
{{! Card meta }}
<div style="padding:12px 14px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
<div style="font-size:0.875rem;font-weight:700;color:var(--title);">{{title}}</div>
{{#if isLive}}<span style="font-size:0.65rem;font-weight:700;color:#22c55e;background:#f0fdf4;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:0.04em;">Live</span>{{/if}}
</div>
<div style="font-size:0.75rem;color:var(--paragraph);margin-bottom:10px;">{{url}}</div>
<div style="display:flex;gap:8px;">
<a href="#" class="btn btn-primary" style="font-size:0.75rem;padding:5px 12px;">Edit</a>
<a href="#" class="btn btn-light" style="font-size:0.75rem;padding:5px 12px;">View</a>
</div>
</div>
</div>
{
"title": "My Bio Page",
"url": "tubespanner.com/bio/mypage",
"isLive": true,
"watermark": true,
"bgColor": "#f97316",
"textColor": "#ffffff",
"channelName": "My Channel",
"avatarSrc": null,
"previewLinks": [
{
"color": "rgba(255,255,255,0.9)"
},
{
"color": "rgba(255,255,255,0.9)"
},
{
"color": "rgba(255,255,255,0.9)"
},
{
"color": "rgba(255,255,255,0.9)"
}
]
}
Represents a creator’s Social Bio page in the Bio Pages management view. Shows a mini-preview of the live page. Free tier gets 1 page (watermarked), Core gets 1, Pro gets 3. Appears in: Bio Pages list, Dashboard.