Definition
This element is used to show a price.
Handlebars
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.
Handlebars
Razor
Open in new tabJavascript
With public price.
Handlebars
Razor
Open in new tabJavascript
Also, the currency could be before the value.
Handlebars
Razor
Open in new tabJavascript
With price suffix.
Handlebars
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.
Handlebars
Razor
Open in new tabJavascript
The small modifier has smaller size. This size is directly related with the small size of the price material.
Handlebars
Razor
Open in new tabJavascript
Example with all sub-parts
An example with the component with all the sub-parts that can be rendered.
Handlebars
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.