Pagination 

  •         {% include "@Components/pagination/pagination.twig" with {
  props : {
    arrow_preview: {
      disabled: true
    },
    items: [
      {
        page: "1"
      }, {
        label: "...",
        id: "idecko",
        tag: "select",
        options: [
          {
            page: "50",
            value: "#"
          }, {
            page: "51",
            value: "#"
          }, {
            page: "52",
            value: "#"
          }, {
            page: "53",
            value: "#"
          }, {
            page: "54",
            value: "#"
          }, {
            page: "55",
            value: "#"
          }, {
            page: "56",
            value: "#"
          }
        ]
      }, {
        page: "3"
      }, {
        page: "4",
        state: "active"
      }, {
        page: "5"
      }
    ],
    arrow_next: {
      variant: "next"
    }
  }
} %}

      
  •           <ul class="pagination">
      <li>
      <a class="pagination-arrow --disabled --previous"" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>
    </li>
  
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        1
      </span>
    
  </a>

  </div>
    </li>
      <li>
          <div class="i-pagination__wrapper">

  <select class="form-control i-pagination__select" id="idecko" name="choices-single-no-sorting">

                  <option value="#">50</option>
              <option value="#">51</option>
              <option value="#">52</option>
              <option value="#">53</option>
              <option value="#">54</option>
              <option value="#">55</option>
              <option value="#">56</option>
      
    
  </select>

      <label class="i-pagination" for="idecko">...</label>
  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        3
      </span>
    
  </a>

  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination  --active">

          <span>
        4
      </span>
    
  </a>

  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        5
      </span>
    
  </a>

  </div>
    </li>
  
      <li>
      <a class="pagination-arrow  --next" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>
    </li>
  </ul>

Schema 

    {
  "props": {
    "arrow_preview": {
      "type": "object",
      "description": "All props are documented by the component `pagination-arrow`."
    },
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `pagination-item`."
    },
    "arrow_next": {
      "type": "object",
      "description": "All props are documented by the component `pagination-arrow`."
    }
  }
}