Stylebook

168 makléřů řadit dle:

        {% include "@Components/sections/re-agents-section/re-agents-section.twig" with { props:
	{
		title: "Realitní makléři v okrese Hradec Králové",
		placeholder: "Obec, ulici, text, ID nemovitosti...",
		button_title: "Hledej",
		sort_dropdown_label: '168 makléřů řadit dle:',
		dropdown: {
			variant: "small",
			options: [
				{
					title: "Výchozí řazení"
				}, {
					title: "Nejlépe hodnocené"
				}, {
					title: "Nejprve nejstarší",
					selected: true
				}, {
					title: "Nejprve nejnovější"
				}
			]
		},
		count: "168"
	}
} %}

          
  
  
  
  
<section class="base-section">
  <div class="base-section__container container">
    
    <header class="base-header">

	
			<div class="base-header__heading-wrapper">
					<h2 class="base-header__heading base-h2"></h2>
			
		</div>
	









































	</header>    



        <div class="f-search --without-button">
        <div class="f-wrap ">
          <span class="f-input__wrapper ">
            <input class="f-base --background-gray-100" type="search" id="input-search-542546034" placeholder="">
                </span>
  </div>
        
            </div>
    <input type="hidden" data-autocomplete-url>

    <div class="s-re-agents__dropdown">
      <span class="s-re-agents__dropdown-text">168 makléřů řadit dle:</span>
      <div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Výchozí řazení</option>
          <option value=""  >Nejlépe hodnocené</option>
          <option value=""  selected="selected"  >Nejprve nejstarší</option>
          <option value=""  >Nejprve nejnovější</option>
    
  </select>

</div>
    </div>
    <ul class="g-re-agents">
  </ul>
    
<div class="g-pagination__wrapper">
	<a class="link --black" href="#">
    </a>

				
	
	
<ul class="pagination">
	  
	  
	  </ul>	</div>
    </div>
</section>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "search": {
      "type": "string",
      "description": "Search field of the component"
    },
    "dropdown": {
      "type": "Array of objects",
      "description": "All props are documented by the component 'dropdown'"
    },
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `re-agents-item`."
    },
    "paggination": {
      "type": "string",
      "description": "Pagination of component"
    }
  }
}