Pro Show feature
Custom dash card templates are available on Pro shows. Basic and Expert shows use the built-in layout picker. If you're on a lower tier, the upload zone won't appear on the Show Edit page.
Uploading your template
Go to your show, open Edit, and scroll to the Custom Dash Card Template card. Drop your .html file onto the upload zone or click to browse. The file must be under 200 KB.
Once uploaded, every subsequent print run uses your template. If you want to go back to the built-in layouts, remove the file — the built-in picker reappears immediately.
📸 Screenshot: Custom Dash Card Template card on the Edit show page
Shows the dashed upload zone, the "Available merge tags" collapsible panel, and the remove-file option for an already-uploaded template
What the upload zone checks
- File extension must be .html
- File size must be under 200 KB
- External <script src="..."> tags are rejected — inline scripts are fine
- External stylesheets are allowed in the file but won't load at print time (see tips below)
Merge tags reference
Write your HTML with placeholder tags in double curly braces. At print time, the server replaces each tag with the real value for that entrant. The upload zone has a collapsible "Available merge tags" panel if you need a quick reminder while you're working.
| Tag | What it outputs |
|---|---|
| {{show_name}} | Name of the show |
| {{show_date}} | Formatted show date |
| {{show_venue}} | Venue name |
| {{car_number}} | Entrant's car number |
| {{entrant_name}} | Entrant's full name |
| {{vehicle_year}} | Vehicle year |
| {{vehicle_make}} | Vehicle make |
| {{vehicle_model}} | Vehicle model |
| {{vehicle_color}} | Vehicle color |
| {{class}} | Show class name |
| {{qr_url}} | QR code image URL — use in <img src="..."> |
| {{logo_url}} | Show logo URL — use in <img src="..."> |
| {{title_sponsors_html}} | Pre-rendered block of all title sponsor logos and names |
| {{supporting_sponsors_html}} | Pre-rendered block of all supporting sponsor logos and names |
| {{all_sponsors_html}} | All sponsors combined in one block |
| {{title_sponsor_1_logo}} | First title sponsor logo URL |
| {{title_sponsor_1_name}} | First title sponsor name |
| {{title_sponsor_2_logo}} | Second title sponsor logo URL |
| {{title_sponsor_2_name}} | Second title sponsor name |
Tags that have no value for a given show — a show with no logo, for example — are replaced with an empty string. Design defensively: don't rely on a sponsor logo being present unless you know you always have one.
A complete working template
Here is a minimal but complete template that produces a clean A5 portrait dash card. It uses inline CSS only, sets the correct page size for printing, and places the key fields in a layout that reads well from the kerb. Copy it, adjust the colours and fonts to match your club, and upload it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dash Card</title>
<style>
/* --- Page size and bleed --- */
@media print {
@page {
size: 148mm 210mm;
margin: 0;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
width: 148mm;
height: 210mm;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
color: #111111;
padding: 10mm;
display: flex;
flex-direction: column;
gap: 6mm;
}
/* --- Show header --- */
.header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #d00;
padding-bottom: 4mm;
}
.show-name {
font-size: 13pt;
font-weight: 700;
color: #d00;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.show-meta {
font-size: 7pt;
color: #555;
text-align: right;
line-height: 1.5;
}
/* --- Car number --- */
.car-number {
font-size: 52pt;
font-weight: 900;
text-align: center;
color: #111;
line-height: 1;
}
/* --- Entrant details --- */
.entrant-name {
font-size: 16pt;
font-weight: 700;
text-align: center;
}
.vehicle {
font-size: 12pt;
text-align: center;
color: #333;
}
.class-label {
font-size: 9pt;
text-align: center;
color: #555;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* --- QR code --- */
.qr-row {
display: flex;
justify-content: center;
margin-top: auto;
}
.qr-row img {
width: 28mm;
height: 28mm;
}
/* --- Sponsors --- */
.sponsors {
border-top: 1px solid #ddd;
padding-top: 3mm;
text-align: center;
font-size: 6pt;
color: #888;
}
</style>
</head>
<body>
<div class="header">
<span class="show-name">{{show_name}}</span>
<div class="show-meta">
{{show_date}}<br />
{{show_venue}}
</div>
</div>
<div class="car-number">#{{car_number}}</div>
<div class="entrant-name">{{entrant_name}}</div>
<div class="vehicle">
{{vehicle_year}} {{vehicle_make}} {{vehicle_model}}
— {{vehicle_color}}
</div>
<div class="class-label">Class: {{class}}</div>
<div class="qr-row">
<img src="{{qr_url}}" alt="QR code" />
</div>
<div class="sponsors">
{{title_sponsors_html}}
</div>
</body>
</html>A few things worth noting in that template. The @page rule sets the physical paper size so the browser's print dialog defaults to A5 — the organiser still needs to choose A5 in their printer settings, but the template declares the intent. The QR code is just an <img> tag pointing at the URL the server provides — no JavaScript required. And the margin-top: auto on the QR row pushes it to the bottom of the card regardless of how much text sits above it.
📸 Screenshot: Rendered dash card produced by the example template
Shows the A5 portrait card in the browser print preview — car number prominent at top, entrant name, vehicle details, QR code, and sponsor section at the bottom
Sponsor placement
You have two approaches for sponsors. Use the pre-rendered blocks when you just want sponsors on the card and don't care exactly where each one sits. Use the individual tags when a sponsor has paid for a specific placement — large logo top-right, for instance — and you need precise control.
Option A — pre-rendered blocks (quick drop-in)
Drop {{title_sponsors_html}}, {{supporting_sponsors_html}}, or {{all_sponsors_html}} into your template. The server renders each sponsor's logo (if uploaded) and name into a horizontal flex row. You style the container; the server handles the individual sponsor elements. This is the right choice for most shows.
Option B — individual sponsor tags (precise placement)
Use {{title_sponsor_1_logo}} as an <img src> and {{title_sponsor_1_name}} as text wherever you want them. Repeat for title_sponsor_2. This works when you have a naming-rights sponsor who needs to dominate the card and one or two supporting sponsors tucked into the footer.
Remember: if no second title sponsor exists, {{title_sponsor_2_logo}} outputs an empty string, leaving a broken <img src=""> in the DOM. Wrap individual sponsor tags in a container you're happy to see empty, or use the pre-rendered blocks instead.
Tips and troubleshooting
Use inline CSS or a <style> block — not a linked stylesheet
When the browser renders your card for printing, it won't be able to fetch an external stylesheet from a URL in a <link rel="stylesheet"> tag. The request either times out or is blocked. Put all your CSS inside a <style> block in the <head>, or write it inline. The worked example above shows the correct approach.
External scripts are blocked
The server strips <script src="..."> tags before rendering. This is a security measure — your template runs on the server, not in a sandboxed browser tab. Inline <script> blocks are allowed, but in practice you shouldn't need JavaScript on a printed card. If you think you do, ask yourself whether the same result can be achieved with CSS.
Image URLs must be absolute and publicly accessible
The {{qr_url}} and {{logo_url}} tags output full https:// URLs that are publicly accessible — the server fetches them server-side, so they work without authentication. If you want to add your own images (a club crest, for example), host them somewhere public — a CDN, an S3 bucket with public-read, your club's website — and reference them with an absolute URL in the src attribute.
Set the correct page size in the template, then confirm it in the print dialog
The @page { size: 148mm 210mm; } rule tells the browser what paper size you're targeting, but the printer driver has the final say. When you open the print dialog, check that the paper size is set to A5 and margins are set to None. Most browsers respect the @page rule by default but some printer drivers override it. A quick test print on plain paper before show day catches any mismatch.
Test with a real entrant before printing the full run
After uploading your template, go to the registrations list and print a single card for one entrant. Check that the merge tags have all resolved, the layout holds at A5, and the QR code scans correctly with a phone camera. Only then print the full batch.
The template is the full page — include <html> and <body>
Unlike some template systems that inject content into a wrapper, Car Show Expert uses your file as the complete HTML document. Include the full document structure:<!DOCTYPE html>, <html>, <head>, and <body>. A fragment with just the card content will still render but you won't be able to set character encoding, page size, or document-level styles reliably.
In summary
- Upload a .html file under 200 KB on Show → Edit (Pro shows only)
- Use merge tags like {{entrant_name}} and {{car_number}} — the server fills them in at print time
- Put all CSS in a <style> block in the <head> — external stylesheets don't load at print time
- External <script src> tags are blocked; inline scripts are allowed
- Set @page { size: 148mm 210mm; margin: 0; } for A5 portrait, then confirm paper size in the print dialog
- Use {{title_sponsors_html}} for quick sponsor drop-in, or individual tags for precise placement
- Host any custom images at public https:// URLs — the server fetches them server-side
- Test a single card before printing the full run