Figures | FEC Pattern Library

Figures are styles for combinations of labels and numbers. Labels can be either inline or above the numbers. Zero-padding with decimals is handled by JavaScript.

When to use

When users are comparing a short list of figures (five or fewer)
When the layout needs a more stylized display that highlights an interesting set of data

When to consider something else

If there are more than five figures to compare, display the information in a table

GitHub issues

#322 Visual design of data landing page

<div style="padding: 2rem; display: inline-block; vertical-align: top"> <div class="snapshot" style="width: 230px; border: none"> <div class="snapshot__item"> <div class="snapshot__item-title"> All committees </div> <div class="snapshot__item-number"> <span class="snapshot__item-number"> <span class="figure__decimals" aria-hidden="true">........................</span> <span data-total-for="all">$4,723,176.20</span> </span> </div> </div> <div class="snapshot__item"> <div class="snapshot__item-title"> <span class="swatch candidates"></span>Candidates </div> <span class="snapshot__item-number"> <span class="figure__decimals" aria-hidden="true">.......................</span> <span data-total-for="candidate">$3,216,435.08</span> </span> </div> <div class="snapshot__item"> <div class="snapshot__item-title"> <span class="swatch pacs"></span>PACs </div> <span class="snapshot__item-number"> <span class="figure__decimals" aria-hidden="true">.......................</span> <span data-total-for="pac">$1,429,382.66</span> </span> </div> <div class="snapshot__item"> <div class="snapshot__item-title"> <span class="swatch parties"></span>Party committees </div> <span class="snapshot__item-number"> <span class="figure__decimals" aria-hidden="true">...........................</span> <span data-total-for="party">$77,358.46</span> </span> </div> </div> </div> <div style="padding: 2rem; display: inline-block"> <div class="top-list js-top-list t-sans" style="width: 330px; background: #f1f1f1; padding: 2rem"> <h2 class="top-list__title">Candidates overview</h2> <h3 class="top-list__subtitle">Top <span class="js-top-type">raising</span> (2015–2016)</h3> <ol class="figure--zero-pad js-top-raising" id="candidates-top-raising"> <li class="figure__item"> <span class="figure__label"> <a href="" title="CLINTON, HILLARY RODHAM / TIMOTHY MICHAEL KAINE">1. CLINTON, HILLARY RODHAM / TIMOTHY MICHAEL KAINE</a> </span> <span class="figure__number"><span class="figure__decimals" aria-hidden="true">.....................................</span>$583,217,327.91</span> </li> <li class="figure__item"> <span class="figure__label"> <a href="" title="TRUMP, DONALD J. / MICHAEL R. PENCE ">2. TRUMP, DONALD J. / MICHAEL R. PENCE </a> </span> <span class="figure__number"><span class="figure__decimals" aria-hidden="true">....................................</span>$341,062,859.10</span> </li> <li class="figure__item"> <span class="figure__label"> <a href="" title="SANDERS, BERNARD">3. SANDERS, BERNARD</a> </span> <span class="figure__number"><span class="figure__decimals" aria-hidden="true">....................................</span>$236,791,426.89</span> </li> <li class="figure__item"> <span class="figure__label"> <a href="" title="CRUZ, RAFAEL EDWARD "TED"">4. CRUZ, RAFAEL EDWARD "TED"</a> </span> <span class="figure__number"><span class="figure__decimals" aria-hidden="true">....................................</span>$93,697,858.92</span> </li> <li class="figure__item"> <span class="figure__label"> <a href="" title="CARSON, BENJAMIN S SR MD">5. CARSON, BENJAMIN S SR MD</a> </span> <span class="figure__number"><span class="figure__decimals" aria-hidden="true">....................................</span>$65,089,368.22</span> </li> </ol> </div> </div>