Radio Box Field 

  •         {% include "@Components/fields/radio-box-field/radio-box-field.twig" with {props: {
  title: "Česká pošta - Balík do ruky",
  value: "balik-do-ruky",
  description: "Zboží si můžete převzít kdykoli, v provozní době po-čt 9:00-17:00. Splňují i požadavky na životnost, schopnost zimních studených startů a navíc odolnost proti překlopení a převrácení vašeho vozidla.",
  availability: "Zboží doručí v úterý 16. 4.",
  img: {
    src: "images/svg/ceska-posta.svg",
  },
  price: {
    main: "30",
  },
}} %}

      
  •             <label class="f-radio-box position-relative w-100 u-cursor-pointer">
  <input class="f-radio-box__input d-none" type="radio" value="balik-do-ruky" value="balik-do-ruky">

  <div class="f-radio-box__body position-relative d-flex column-gap-2 row-gap-1 align-items-center py-1 px-2 u-bg-white u-line-bottom u-rounded-2">
    <span class="f-radio-box__visual d-flex flex-shrink-0 align-items-center justify-content-center u-posr u-rounded-full u-bg-white"></span>
    <div class="f-radio-box__image-col d-flex flex-shrink-0 align-items-center justify-content-center">
              <div class="img u-posr overflow-hidden --contain --placeholder --ratio-3-2">
  <picture>
    
    <img src="" data-src="images/svg/ceska-posta.svg" alt="Česká pošta - Balík do ruky" width="42" height="24" draggable="false">
  </picture>
</div>
          </div>
    <div class="f-radio-box__content-col row-gap-1 column-gap-3 d-flex flex-wrap flex-column align-items-start">
      <div class="f-radio-box__title d-flex row-gap-1 column-gap-3 flex-wrap u-fw-600 u-fz-md-14">
        <span>Česká pošta - Balík do ruky</span>

                  <span class="f-radio-box__availability d-flex align-items-center column-gap-1 u-fz-xs">
              
  <span class="icon d-flex align-items-center justify-content-center  --xs">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg>      </span>
            Zboží doručí v úterý 16. 4.</span>
              </div>

      
                <p class="base-perex  mb-0 u-fz-sm u-color-text-400 f-radio-box__paragraph u-fz-md-14" data-word-limit="10" >
  
              Zboží si můžete převzít kdykoli, v provozní době po-čt 9:00-17:00.
    <span class="base-perex__ellipsis">…</span>
    <span class="base-perex__completed-perex d-none">Splňují i požadavky na životnost, schopnost zimních studených startů a navíc odolnost proti překlopení a převrácení vašeho vozidla.</span>
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --no-style --xs      base-perex__load-more   --no-padding" href='#' data-second-title="Méně">
      <span class="btn__title u-z-index-1">
      Více
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --md">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </a>
  </p>
          </div>

    <div class="f-radio-box__price-col ms-auto align-self-center">
              <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__main d-flex justify-content-end align-items-end gap-1">

      
      
      <span class="i-price__main u-fw-700">
        <span class="">
          30
        </span>
                  Kč              </span>
    </div>
  
  </div>
          </div>

  </div>

</label>

With options 

  •         {% include "@Components/fields/radio-box-field/radio-box-field.twig" with {props: {
  title: "Osobní odběr",
  value: "osobni-odber",
  availability: "Zboží doručí v úterý 16. 4.",
  img: {
    src: "images/svg/ceska-posta.svg",
  },
  options: [
    {
      title: 'České Budějovice',
      value: 'personal-collection-ceske-budejovice',
      selected: true,
    },
    {
      title: 'Český Krumlov',
      value: 'personal-collection-cesky-krumlov',
    },
    {
      title: 'Tábor',
      value: 'personal-collection-tabor',
    }
  ],
  price: {
    main: "30",
  },
}} %}

      
  •             <label class="f-radio-box position-relative w-100 u-cursor-pointer">
  <input class="f-radio-box__input d-none" type="radio" value="osobni-odber" value="osobni-odber">

  <div class="f-radio-box__body position-relative d-flex column-gap-2 row-gap-1 align-items-center py-1 px-2 u-bg-white u-line-bottom u-rounded-2">
    <span class="f-radio-box__visual d-flex flex-shrink-0 align-items-center justify-content-center u-posr u-rounded-full u-bg-white"></span>
    <div class="f-radio-box__image-col d-flex flex-shrink-0 align-items-center justify-content-center">
              <div class="img u-posr overflow-hidden --contain --placeholder --ratio-3-2">
  <picture>
    
    <img src="" data-src="images/svg/ceska-posta.svg" alt="Osobní odběr" width="42" height="24" draggable="false">
  </picture>
</div>
          </div>
    <div class="f-radio-box__content-col row-gap-1 column-gap-3 d-flex flex-wrap">
      <div class="f-radio-box__title d-flex row-gap-1 column-gap-3 flex-wrap u-fw-600 u-fz-md-14 flex-column align-items-start mb-2 mb-lg-0">
        <span>Osobní odběr</span>

                  <span class="f-radio-box__availability d-flex align-items-center column-gap-1 u-fz-xs">
              
  <span class="icon d-flex align-items-center justify-content-center  --xs">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg>      </span>
            Zboží doručí v úterý 16. 4.</span>
              </div>

              <div class="f-radio-box__options">
          

<div class="f-single-select-inline --native u-posr --icon-before  u-fw-600">
  <span class="f-single-select-inline__icon --before p-1 u-top-50-p u-translate-middle-y u-posa">
      
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m12.667 22-.581-.498c-.801-.67-7.794-6.71-7.794-11.127a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="currentColor" d="M12.666 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg>      </span>
  </span>

  <select class="f-single-select-inline__select slim-select">
          <option class="" selected value="personal-collection-ceske-budejovice"></option>
          <option class="" value="personal-collection-cesky-krumlov"></option>
          <option class="" value="personal-collection-tabor"></option>
      </select>

</div>
        </div>
      
          </div>

    <div class="f-radio-box__price-col ms-auto align-self-center">
              <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__main d-flex justify-content-end align-items-end gap-1">

      
      
      <span class="i-price__main u-fw-700">
        <span class="">
          30
        </span>
                  Kč              </span>
    </div>
  
  </div>
          </div>

  </div>

</label>