Components / Content patterns

Price

A value with one or several cadence lines centered beside it.

Try it Size

example / month
billed monthly

HTML

<div class="price"><strong><button class="tooltip-trigger" type="button" data-tooltip title="An illustrative amount, not an actual service offer.">$99</button></strong><small>example / month<br>billed monthly</small></div>

Options

Class or attribute	What it does
`is-small / is-large`	Value scale; cadence uses the shared small text size.
`tooltip`	Optionally add a tooltip-trigger button inside the strong value.