<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Pricing

Styling to display prices.

The various Pricing components provide common styling for prices. They set color, font weight, and strikethrough text as appropriate, but do not set font size. This allows them to be used in a variety of contexts. Certain components may automatically add context-specific styling to Pricing, e.g. inside a Standard Tile.

List Price

Simple list prices use the List Price component, which currently looks the same as normal text (but might not in a future rebrand).

The preview has been updated.

Pricing Comparison

Inside a Pricing Comparison component, the List Price gets a strikethrough appearance, since we also show the Discount Price:

The preview has been updated.

Discount Price can also be used by itself (outside of a Pricing Comparison block) to indicate price savings:

The preview has been updated.

full Pricing component

A full Pricing component may also include a Pricing Offer (such as "100 Starting at") and/or a Short Tax Message (such as "Inc. VAT"):

The preview has been updated.

Props

DiscountPrice
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PricingComparison
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PricingOffer
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Pricing
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
ShortTaxMessage
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
ListPrice
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 31, 2022Last updated: Sep 18, 2024