Skip to main content

Card Field Multi-Price Custom Styling

Target the .card_name, .card_price, and per-size price-item classes with custom CSS to style multi-price card fields

Written by Marc Rosenberg

Card Field Multi-Price Custom Styling

When a card field holds more than one price — Sm / Md / Lg, 12oz / 16oz / 20oz, Single / Double — Menuboard Manager renders each price as its own styleable element. This article covers those CSS classes and how to target them from the presentation's CSS tab.

If you haven't set up a multi-price card yet, see the Multi-Price Card Fields section of Working with Presentations first. For the general CSS/HTML/JS mechanism this article builds on, see Customizing Presentations with CSS, HTML, and JavaScript.

How a multi-price card renders

A single-price card renders its price in one .card_price element, same as always. A multi-price card wraps every price in that same .card_price element, with each price broken out into its own <span>:

<div class="card_container">
  <div class="card_name">Latte</div>
  <div class="card_desc">Espresso, steamed milk</div>
  <div class="card_price">
    <span class="price-item price-sm">3.50</span>
    <span class="price-item price-lg">4.95</span>
  </div>
</div>

Every price span gets two classes:

  • .price-item — shared by every price on every multi-price card. Style this to affect all prices on a card at once, regardless of size.

  • .price-{size} — unique to that price's size label, so you can target one size only.

How the size class is generated

The price-{size} class comes directly from the size label you typed on that price row — lowercased, with spaces turned into underscores:

Size label

CSS class

Sm

.price-sm

Md

.price-md

Lg

.price-lg

XL

.price-xl

12oz

.price-12oz

Large Combo

.price-large_combo

(blank)

.price-1, .price-2, … (by row position)

Rename carefully. Because the class is derived from the label, renaming a price row's size (e.g. "Sm" → "Small") changes its CSS class too — a rule written against .price-sm will stop matching that row. If you want a rule that survives relabeling, target .price-item instead, or keep your size labels stable once you've styled them.

Example: consistent letter-spacing and spacing between prices

.card_name, .card_price { letter-spacing: -.4px; }
.price-sm { margin-left: 12px; }
.price-md { margin-left: 12px; }
.price-lg { margin-left: 12px; }
.price-xl { margin-left: 12px; }

Paste this into the presentation's CSS tab. What each rule does:

  • .card_name, .card_price { letter-spacing: -.4px; } tightens the letter spacing on both the item name and the entire price line — useful for condensed fonts where default tracking looks loose.

  • Each .price-{size} rule adds a fixed left margin to that size's price. Because the prices are joined by plain spaces inside .card_price, this turns the built-in whitespace gap into a deliberate, consistent one — which matters once the letter-spacing rule above tightens things up and the default spacing starts to look cramped. Giving price-sm the same margin as the others shifts the whole price line in slightly so it lines up with padding elsewhere on the card.

More recipes

Style every price the same way, regardless of label:

.price-item { font-size: 32px; color: #ffffff; }

Call out one size (e.g. highlight your best-margin variant):

.price-lg { font-weight: 700; color: #f5c518; }

Empty price rows still render. A price left blank shows as — but keeps its price-{size} class, so a rule like .price-lg { color: #999; } will also apply to a blank Lg row's dash — style it deliberately if you want blanks to look different from filled-in prices.

Precedence over Section Settings

If the card sits inside a Field Section with typography set for Card Price in Section Settings, custom CSS added in the presentation's CSS tab always wins over those settings — it's injected with higher specificity for exactly this reason. That means the rules above will reliably override whatever font size, color, or alignment you picked for Card Price in Section Settings, without needing !important.

Related Articles

Related Articles
Did this answer your question?