Skip to content

Instantly share code, notes, and snippets.

@sbibek

sbibek/test.handlebars

Last active January 28, 2026 07:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sbibek/c8069333a5d3b3ff6a4489928d1d73dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sbibek/c8069333a5d3b3ff6a4489928d1d73dc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.handlebars
<div
style="
width: 760px;
background: #0b1220;
border-radius: 18px;
padding: 16px 18px;
box-sizing: border-box;
color: #e5e7eb;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
display: grid;
grid-template-columns: 240px 260px 1fr;
gap: 18px;
align-items: center;
"
aria-label="Stock ticker {{symbol}}"
>
<!-- LEFT -->
<div style="display:flex; align-items:center; gap: 14px; min-width: 0;">
<div
style="
width: 64px;
height: 64px;
border-radius: 18px;
background: rgba(59,130,246,0.18);
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(59,130,246,0.25);
flex: 0 0 auto;
"
aria-hidden="true"
>
<div style="font-size: 22px; font-weight: 900; color: #93c5fd;">
{{#if logoText}}{{logoText}}{{else}}{{symbol}}{{/if}}
</div>
</div>
<div style="min-width: 0;">
<div style="display:flex; align-items:baseline; gap: 12px; min-width:0;">
<div style="font-size: 28px; font-weight: 900; letter-spacing: 0.2px;">
{{symbol}}
</div>
{{#if exchange}}
<div style="font-size: 16px; color: #9ca3af; white-space: nowrap;">
{{exchange}}
</div>
{{/if}}
</div>
{{#if name}}
<div style="font-size: 18px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{name}}
</div>
{{/if}}
</div>
</div>
<!-- MIDDLE -->
<div style="display:flex; flex-direction:column; gap: 10px; min-width: 0;">
<div style="display:flex; align-items:center; gap: 12px; min-width: 0;">
<div style="font-size: 48px; font-weight: 950; color: #ffffff; line-height: 1; white-space: nowrap;">
{{#if currency}}{{currency}}{{/if}}{{price}}
</div>
{{#if change}}
<div
style="
font-size: 16px;
font-weight: 900;
padding: 8px 12px;
border-radius: 999px;
white-space: nowrap;
background: {{#if isUp}}rgba(34,197,94,0.15){{else}}rgba(239,68,68,0.15){{/if}};
color: {{#if isUp}}#4ade80{{else}}#f87171{{/if}};
border: 1px solid {{#if isUp}}rgba(34,197,94,0.25){{else}}rgba(239,68,68,0.25){{/if}};
"
>
{{#if isUp}}▲{{else}}▼{{/if}} {{change}} {{#if changePercent}}({{changePercent}}){{/if}}
</div>
{{/if}}
</div>
<div style="display:flex; align-items:center; gap: 10px; font-size: 18px; color: #9ca3af; min-width:0;">
{{#if asOf}}<div style="white-space: nowrap;">As of {{asOf}}</div>{{/if}}
<div style="opacity: 0.8;">•</div>
{{#if marketState}}<div style="white-space: nowrap;">{{marketState}}</div>{{/if}}
</div>
</div>
<!-- RIGHT -->
<div style="display:flex; gap: 22px; justify-content:flex-end; align-items:flex-start;">
<!-- Open -->
<div style="min-width: 110px;">
<div style="font-size: 16px; color: #9ca3af; margin-bottom: 6px; white-space: nowrap;">Open</div>
<div style="font-size: 26px; font-weight: 900; color: #e5e7eb; white-space: nowrap;">
{{#if currency}}{{currency}}{{/if}}{{open}}
</div>
</div>
<!-- Day Range -->
<div style="min-width: 180px;">
<div style="font-size: 16px; color: #9ca3af; margin-bottom: 6px; white-space: nowrap;">Day Range</div>
<div style="font-size: 24px; font-weight: 900; color: #e5e7eb; line-height: 1.15;">
{{#if currency}}{{currency}}{{/if}}{{dayLow}} —<br/>
{{#if currency}}{{currency}}{{/if}}{{dayHigh}}
</div>
<div
style="
height: 8px;
border-radius: 999px;
background: rgba(148,163,184,0.18);
border: 1px solid rgba(148,163,184,0.22);
overflow: hidden;
margin-top: 10px;
"
aria-hidden="true"
>
<div
style="
height: 100%;
width: {{rangePct}};
background: linear-gradient(90deg, rgba(59,130,246,0.85), rgba(99,102,241,0.85));
"
></div>
</div>
</div>
<!-- Volume -->
<div style="min-width: 120px;">
<div style="font-size: 16px; color: #9ca3af; margin-bottom: 6px; white-space: nowrap;">Volume</div>
<div style="font-size: 26px; font-weight: 900; color: #e5e7eb; white-space: nowrap;">
{{volume}}
</div>
{{#if avgVolume}}
<div style="font-size: 18px; color: #9ca3af; margin-top: 6px; white-space: nowrap;">
Avg {{avgVolume}}
</div>
{{/if}}
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment