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

Preview

Twig

Html

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

Preview

Twig

Html

Sleva 500 Kč

Celková cena s DPH Zdarma

Celková 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>