Real estate agency section

  • Realitní kanceláře, realitky - Česká republika

    Přidat firmu zdarma 
  •         {% include "@Components/sections/real-estate-agency-header-section/real-estate-agency-header-section.twig" with { props: {
  title: "Realitní kanceláře, realitky - Česká republika",
  button: {
    title: "Přidat firmu zdarma",
    variant: "outline",
    animation: "zoom",
    iconBefore: true,
    icon: {
      src: "svg/plus.svg",
    },
    extraClass: "s-real-estate-agency__button"
  },
  dropdown: {
    variant: "small",
    options: [
      {
        title: "Výchozí řazení"
      }, {
        title: "Nejlépe hodnocené"
      }, {
        title: "Nejprve nejstarší",
        selected: true
      }, {
        title: "Nejprve nejnovější"
      }
    ]
  },
  search_field: {
    placeholder: "Jakou firmu hledáte?",
    button:{
      title: "Hledej"
    }
  }
}
} %}

      
  •           





<section class="base-section-side-menu  --p-bottom-0  s-real-estate-agency">
  <div class="base-section-side-menu__container container">
    <div class="base-section-side-menu__content">
      
    <header class="base-header --left">
      <h2 class="base-header__heading base-h1">Realitní kanceláře, realitky - Česká republika</h2>
    </header>

    <div class="s-real-estate-agency__wrapper">
      
<div class="f-search">
  <div class="f-wrap">
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base --background-gray-100" type="search" id="test" placeholder="Jakou firmu hledáte?">
      </span>

</div>
  <div class="f-search__button">
    <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title">Hledej</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs></defs><g transform="translate(0 517.576)"><path class="a" d="M15.731-503.136l-2.146-2.138a7.607,7.607,0,0,0,1.624-4.7,7.641,7.641,0,0,0-7.6-7.6,7.641,7.641,0,0,0-7.6,7.6,7.641,7.641,0,0,0,7.6,7.6,7.606,7.606,0,0,0,4.7-1.624l2.138,2.146a.91.91,0,0,0,.646.269.91.91,0,0,0,.645-.269A.91.91,0,0,0,16-502.49a.91.91,0,0,0-.269-.646ZM1.85-509.956a5.8,5.8,0,0,1,5.77-5.77,5.8,5.8,0,0,1,5.77,5.77,5.8,5.8,0,0,1-5.77,5.77A5.8,5.8,0,0,1,1.85-509.956Z"/></g></svg>

  </span>
    </span>
  </button>
  </div>

  </div>
      <a class="btn --outline  --icon-before --animation-zoom      s-real-estate-agency__button" href='#'>    <span class="btn__title">Přidat firmu zdarma</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="19.5" height="19.5" viewBox="0 0 19.5 19.5">
  <g id="Group_155" data-name="Group 155" transform="translate(-17.25 -90.25)">
    <path id="Path" d="M.5,0V8" transform="translate(26.5 96)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M8,.5H0" transform="translate(23 99.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-3" data-name="Path" d="M9,18H9A9,9,0,0,1,0,9H0A9,9,0,0,1,9,0H9a9,9,0,0,1,9,9h0A9,9,0,0,1,9,18Z" transform="translate(18 91)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
    </span>
  </a>
    </div>

    <div class="base-section__sort">
        <a class="link --primary    d-inline-block d-xl-none" href="#" data-toggle-target='' href="#">
  <span class="link__title">
    <span class="link__title-wrap"></span>
  </span>

  </a>
      <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>

      </div>

    <div class="base-section-side-menu__side-menu">
              
          </div>
  </div>
</section>

Schema 

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "button": {
      "type": "string",
      "description": "All props are documented by the core 'button'"
    },
    "dropdown": {
      "type": "string",
      "description": "All props are documented by the core 'dropdown'"
    },
    "search": {
      "type": "object",
      "description": "All props are documented by the core 'search-field'"
    }
  }
}