- id:
Price item
Price item used in different scenarios
Simple price item size small
-
2 199 €90 599 990 €10 056 990 €
-
{% include "@Components/items/price-item/price-item.twig" with {props: { main: "90 599 990", base: "10 056 990", before: "2 199", currency: "€" }} %} -
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400"> <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1"> <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary"> 2 199 € </span> </div> <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1"> <span class="i-price__main u-fw-700"> <span class=""> 90 599 990 </span> € </span> </div> <div class="i-price__row i-price__base d-flex justify-content-end align-items-center gap-1"> <span class="i-price__base u-fw-500 u-color-tertiary-600"> 10 056 990 € </span> </div> </div>
Price item with titles size large
-
Sleva 2 199 KčCelková cena s DPH 90 599 990 KčCelková cena bez DPH 10 056 990 Kč
-
{% include "@Components/items/price-item/price-item.twig" with {props: { main: "90 599 990", base: "10 056 990", before: "2 199", main_title: "Celková cena s DPH", base_title: "Celková cena bez DPH", before_title: "Sleva", size: "lg" }} %} -
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400"> <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1"> <span class="i-price__title u-fz-xs u-fw-400">Sleva</span> <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary"> 2 199 Kč </span> </div> <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1"> <span class="i-price__title u-fz-md u-fw-700">Celková cena s DPH</span> <span class="i-price__main u-fw-700"> <span class=""> 90 599 990 </span> Kč </span> </div> <div class="i-price__row i-price__base d-flex justify-content-end align-items-center gap-1"> <span class="i-price__title u-fz-sm u-fw-500 u-color-tertiary-600">Celková cena bez DPH</span> <span class="i-price__base u-fw-500 u-color-tertiary-600"> 10 056 990 Kč </span> </div> </div>
Zero values replaced by word
-
Sleva 500 KčCelková cena s DPH ZdarmaCelková cena bez DPH Zdarma
-
{% include "@Components/items/price-item/price-item.twig" with {props: { main: "0", base: "0", before: "500", main_title: "Celková cena s DPH", base_title: "Celková cena bez DPH", before_title: "Sleva", size: "lg" }} %} -
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400"> <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1"> <span class="i-price__title u-fz-xs u-fw-400">Sleva</span> <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary"> 500 Kč </span> </div> <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1"> <span class="i-price__title u-fz-md u-fw-700">Celková cena s DPH</span> <span class="i-price__main u-fw-700"> <span class=""> Zdarma </span> </span> </div> <div class="i-price__row i-price__base d-flex justify-content-end align-items-center gap-1"> <span class="i-price__title u-fz-sm u-fw-500 u-color-tertiary-600">Celková cena bez DPH</span> <span class="i-price__base u-fw-500 u-color-tertiary-600"> Zdarma </span> </div> </div>