Availability item

Availability item default

  • Titulek stavu
    ( Počet dostupných kusů nebo popisek ) 
  •         {% include "@Components/items/availability-item/availability-item.twig" with {props: {
  status: "default",
  title: "Titulek stavu",
  description: "Počet dostupných kusů nebo popisek"
}} %}

      
  •           <div class="i-availability u-fz-sm d-flex flex-column --default">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Titulek stavu
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Počet dostupných kusů nebo popisek )
      </span>

  </div>

Availability statuses

Available

  • Skladem
    ( 52 265 Ks ) 
  •         {% include "@Components/items/availability-item/availability-item.twig" with {props: {
  status: "available",
  title: "Skladem",
  quantity: "52 265",
}} %}

      
  •           <div class="i-availability u-fz-sm d-flex flex-column --available">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 52 265 Ks )
      </span>

  </div>

Unavailable

  • Nedostupné
    ( Zpět 24.5. ) 
  •         {% include "@Components/items/availability-item/availability-item.twig" with {props: {
  status: "unavailable",
  title: "Nedostupné",
  description: "Zpět 24.5."
}} %}

      
  •           <div class="i-availability u-fz-sm d-flex flex-column --unavailable">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>

Preorder

  • Na dotaz
    ( 0 ) 
  •         {% include "@Components/items/availability-item/availability-item.twig" with {props: {
  status: "preorder",
  title: "Na dotaz"
}} %}

      
  •           <div class="i-availability u-fz-sm d-flex flex-column --default">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Na dotaz
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>