Formatted Number generator
KPI tiles, dashboard summaries and record header stats all lean on lightning-formatted-number for currency, percent and decimal display. Style the value size and trend indicator so key numbers are the first thing a user notices.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="studio-formatted-number">
<p class="studio-formatted-number__label">Total Revenue</p>
<lightning-formatted-number value={numericValue} style="currency" currency-code="USD"></lightning-formatted-number>
<p class="studio-formatted-number__trend studio-formatted-number__trend--up">+12.4%</p>
</div>
</template>Design tips for formatted numbers
- Reserve large, bold value styling for the single most important number on a page — stacking several the same size dilutes all of them.
- Use consistent positive/negative trend colors (green up, red down) across every dashboard so users don’t have to re-learn the convention per page.
- Round large currency values (e.g. $128K) in tile contexts; keep full precision only where the exact figure matters.