Price
What something costs, set the way a price is read.
On this page
A price is what something costs, set the way a price is read: the figures large, the currency mark small and hung from their top, the period quiet on their baseline. It has no surface of its own. Put it in a plan's card, beside a product, or at the foot of an invoice.
Price
<div class="tray flex flex-wrap gap(4) max-w(480) mx-auto"> <div class="card card-flat grow(1) basis(200)"> <div class="card-header"> <h3 class="card-title">Starter</h3> <p class="card-description">For one person and a few projects.</p> </div> <p class="price"> <span class="price-currency">$</span> <span class="price-amount">9</span> <span class="price-period">per month</span> </p> <div class="card-footer"> <button class="btn" type="button">Choose Starter</button> </div> </div> <div class="card card-flat grow(1) basis(200)"> <div class="card-header"> <h3 class="card-title">Team</h3> <p class="card-description">For a team that ships every day.</p> </div> <p class="price"> <s class="price-was">$39</s> <span class="price-currency">$</span> <span class="price-amount">29</span> <span class="price-period">per month</span> </p> <div class="card-footer"> <button class="btn btn-primary" type="button">Choose Team</button> </div> </div></div>#Parts
price-amountis the figures, in tabular numerals with a tight fit. It may be a word: Free, Custom.price-currencyis the currency mark. It is under half the size of the figures and its top is level with theirs, so it reads as part of the number without competing with it.price-periodsays per what: a month, a seat, a thousand requests. It is small and muted on the baseline. Write it in words; "/mo" is read aloud as "slash mo".price-wasis a price that no longer holds. It stands before the amount, quiet and struck through. Use an<s>for it, which says the text is no longer accurate.
Write the parts in reading order: was, currency, amount, period. For a currency that follows its figures, put price-currency after price-amount.
#Sizes
The figures are 36px. price-sm is 24px, for a row or a small card, and price-lg is 56px, for the one price a page is about. Every part is sized from the figures, so --price-size scales the whole price to any size between.
Sizes
<p class="price price-sm"> <span class="price-currency">$</span> <span class="price-amount">9</span> <span class="price-period">per month</span></p><p class="price"> <span class="price-currency">$</span> <span class="price-amount">29</span> <span class="price-period">per month</span></p><p class="price price-lg"> <span class="price-currency">€</span> <span class="price-amount">1,240</span> <span class="price-period">per seat</span></p>#Price or stat
A price is a cost to weigh. A measurement with a label and a change, such as revenue this month, is a stat. An amount that is one cell among many belongs in a table with table-numeric.
#Accessibility
- The parts are read in the order they are written: "dollar 29 per month". Keep the currency mark as text, never as a background image.
- A struck price is not announced as struck by every screen reader. Add a few words a reader does not see, such as "was" before it and "now" before the amount, when the difference matters.
- Do not rely on the size of the figures to say which plan is recommended: say it in the card.
#Classes
| Class | Description |
|---|---|
price | The price on one line, 36px figures in tabular numerals with a tight fit |
price-sm | 24px figures; the default is 36px. With price |
price-lg | 56px figures, for the one price a page is about; the default is 36px. With price |
price-amount | The figures, or a word such as Free |
price-currency | The currency mark, under half the size of the figures and level with their top |
price-period | Per what, small and muted on the baseline: a month, a seat |
price-was | The price that no longer holds, quiet and struck through, before the amount |
#Custom properties
| Property | Default | Description |
|---|---|---|
--price-size | 2.25rem | Size of the figures; the other parts follow it |