Definition
This element is used to show a price.
React
Razor
Open in new tabJavascript
The component can include some extra optional information:
- Sale text
- Old price
- Legend
- Info icon that opens a modal with legal info
- Public price
All this optionals items are independent and could be shown or hidden separately.
React
Razor
Open in new tabJavascript
With public price.
React
Razor
Open in new tabJavascript
Also, the currency could be before the value.
React
Razor
Open in new tabJavascript
With price suffix.
React
Razor
Open in new tabJavascript
Size modifiers
The small modifier has smaller size. This size is directly related with the small size of the price material.
This size will be used in places where a lot of prices are required, for example the price table.
React
Razor
Open in new tabJavascript
The small modifier has smaller size. This size is directly related with the small size of the price material.
React
Razor
Open in new tabJavascript
Modal title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.