eliza

Price

components price

Definition


This element is used to show a price.

c-price

Handlebars

1.245
Loading...

Javascript

Loading...

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

-15%
1.900€
Price per person
1.245
Loading...

Javascript

Loading...

With public price.

Handlebars

-15%
Public price 299
Price per person
1.245
Loading...

Javascript

Loading...

Also, the currency could be before the value.

Handlebars

-15%
Public price 299
Price per person
1.245
Loading...

Javascript

Loading...

With price suffix.

Handlebars

1.295p.p.
Loading...

Javascript

Loading...

Size modifiers


c-price > c-price--small

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

-15%
Public price 299
Price per person
1.245
Loading...

Javascript

Loading...

c-price > c-price--large

The small modifier has smaller size. This size is directly related with the small size of the price material.

Handlebars

-15%
Public price 299
Price per person
1.245
Loading...

Javascript

Loading...

Example with all sub-parts


An example with the component with all the sub-parts that can be rendered.

Handlebars

-15%
Public price 299€
Price per person
1.245p.p.
this is the label of the price
pulic ski pass 99€
Loading...

Javascript

Loading...

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.