How to Use These Templates

What's in the Download

Each template comes in two versions:

• Plug-and-play: Our current data, ready to embed or use as-is. No edits needed.
• White-label template: Placeholder data you replace with your own numbers, your own stories, your own community.

What You'll Need

• A text editor (Notepad, TextEdit, VS Code, or similar)
• A web browser to preview your changes
• Your data (budget numbers, sources, character stories)
• Optional: someone on your team comfortable with basic HTML

The Receipt — How to Customize

Understanding the Structure

The receipt has two sides: 'Funded & Protected' (left) and 'Cut & Defunded' (right). Each item has five parts:

1. Label — the category (e.g., "Health Coverage")
2. Program — the specific program or policy (e.g., "Medicaid")
3. Amount — the dollar figure or percentage
4. Period — timeframe and source reference
5. Human line — one sentence making the number real

Editing the Data

Open the template in a text editor. Search for 'receipt-item' to find each entry. Replace the placeholder text between the HTML tags with your numbers.

<div class="receipt-item-label">YOUR CATEGORY</div>
<div class="receipt-item-program">YOUR PROGRAM NAME</div>
<div class="receipt-item-amount">$YOUR NUMBER</div>
<div class="receipt-item-period">your timeframe · your source</div>
<div class="receipt-item-human">Your one-sentence human impact line.</div>

Using the CSV Data Guide

If you downloaded the CSV guide, it shows the data format used on our site. You can use it as a reference for structuring your own data before entering it into the template. The CSV is not required — it's a companion reference.

Customizing Colors

The template uses CSS custom properties. To change the brand colors, find the :root section near the top and update these values:

--teal: #0091AD;     /* right-side amounts, links */
--yellow: #FAD826;   /* left-side header */
--fuchsia: #B22F93;  /* VS badge, accents */

The Villain Index — How to Customize

Understanding the Structure

The villain index is a clickable list. Each row represents a domain (like 'Groceries' or 'Healthcare'). Clicking a row opens a detail modal with stats, narrative, and sources.

Editing the Index Rows

Search for 'villain-index-row' in the HTML. Each row has a domain name and a subtitle. Replace these with your own.

Editing the Modal Data

The detail content is stored in a JavaScript object called villainData near the bottom of the file. Each entry has:

• domain: The category name
• names: The key players/companies
• stats: An array of {num, label} pairs
• narrative: The human story (HTML allowed for bold text)
• sources: Attribution line

Example:

groceries: {
  domain: 'Your Domain',
  names: 'Key Player 1 · Key Player 2',
  stats: [
    { num: '$XX', label: 'what this number means' },
    { num: 'XX%', label: 'what this percentage means' }
  ],
  narrative: 'Your narrative connecting the data to real people...',
  sources: 'Your sources here'
}

Adding or Removing Rows

To add a domain, copy an existing villain-index-row block and add a matching entry in villainData. To remove one, delete both the row HTML and its data entry.

Embedding on Your Website

Both templates can be embedded on any website using an iframe:

<iframe src="your-receipt.html" width="100%" height="800" frameborder="0"></iframe>

Or you can host the HTML file directly. Upload it to your web server alongside any assets.

Tips

• Always source your numbers. Readers will check.
• Keep the human impact lines to one sentence. Let the math do the work.
• Test on mobile — both templates are responsive but check with your data.
• If you're comfortable with CSS, you can change fonts, spacing, and layout.

Need Help?

These tools are free to use, adapt, and brand as your own. If you want help customizing for your community or issue area, reach out: action@mboldenchange.org