Components

Pricing Rate

The flat-rate pricing table on the Pricing page — numbered rows with a name, a note, and a right-aligned amount.

Markup

<div class="rate-rows">
  <div class="rate rv">
    <span class="no">/ 02</span>
    <div>
      <h3>DRAIN CLEARING</h3>
      <p class="note">Single fixture to main line. Camera inspection included when we&rsquo;re not sure.</p>
      <br><span class="cost">FLAT RATE IN WRITING &mdash; SAYING NO COSTS $0</span>
    </div>
    <span class="amount">$149<small>FROM</small></span>
  </div>
</div>

Emphasis modifier

Add .emphasis to a .rate row to give it a subtle raised background panel — used on the first row (the service call & diagnosis fee) to draw the eye to the entry point of the rate card.

<div class="rate rv emphasis">…</div>

Amount column

The right-aligned .amount renders the price at the same large display size as the row's own <h3>, with tabular numerals so figures of different digit counts still align. An optional <small> qualifier below the figure (e.g. “FROM”) reads in a smaller muted mono style.

Qualifier line

.qual is an optional small mono line under a row's note, used for a short caveat (like a seasonal discount) that doesn't need the full weight of the row's .cost chip.