Stylebook

Real estate agency branches

6

České Budějovice

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva) Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

České Budějovice2

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

České Budějovice

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

České Budějovice3

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

České Budějovice3

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

České Budějovice3

Pobočka

Budějcká tř. 1247/24, 370 23 (OD Kotva)
Ukázat na mapě

        {% include "@Components/sections/re-agency-detail-branches-section/re-agency-detail-branches-section.twig" with { props: {
  branch_title: "Pobočky",
  branches_count: 3,
  link: {
    title: "Zobrazit vše",
    href: "#",
    color: "primary"
  },
  items: reAgencyBranchesItems
}
} %}

          <section class="base-section  --spacing-md    s-re-agency-detail-branches">
  <div class="base-section__container container">
    
    <header class="base-header --left --underline">
      <div class="base-header__heading-wrapper">
      <h2 class="base-header__heading base-h1"></h2>
      <div class="base-header__number">
        6
      </div>
    </div>
    </header>

    <div class="s-re-agency-detail-branches__search-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">
      </span>

</div>
  <div class="f-search__button">
    <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title"></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>
      
<fieldset class="checkbox-fieldset">
  <div class="checkbox-fieldset__wrapper">
    <legend class="checkbox-fieldset__heading"></legend>

    <div class="checkbox-fieldset__list ">
          </div>
  </div>

</fieldset>
    </div>
    <div class="s-re-agency-detail-branches__container">

      <div class="swiper s-re-agency-detail-branches__slider">
  <div class="swiper-wrapper">
                  <div class="swiper-slide ">
          <div class="i-branch">
  <a href="#" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="#">
      <h3 >České Budějovice</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva) Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

</div>
        </div>
              <div class="swiper-slide ">
          <div class="i-branch">
  <a href="#" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="#">
      <h3 >České Budějovice2</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

</div>
        </div>
              <div class="swiper-slide ">
          <div class="i-branch">
  <a href="#" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="#">
      <h3 >České Budějovice</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

</div>
        </div>
              <div class="swiper-slide ">
          <div class="i-branch">
  <a href="" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="">
      <h3 >České Budějovice3</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

</div>
        </div>
              <div class="swiper-slide ">
          <div class="i-branch">
  <a href="#" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="#">
      <h3 >České Budějovice3</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

</div>
        </div>
              <div class="swiper-slide ">
          <div class="i-branch">
  <a href="#" class="i-branch__image">
    <div class="img">
  <picture>
    
    <img src="images/content/branch-item.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
  <div class="i-branch__content">
    <a class="i-branch__title" href="#">
      <h3 >České Budějovice3</h3>
    </a>
    <div class="i-branch__type">Pobočka</div>
    <div class="i-branch__address">Budějcká tř. 1247/24, 370 23 (OD Kotva)</div>
    <a class="link --primary" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ukázat na mapě</span>
  </span>

  </a>
  </div>

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

            <div class="s-re-agency-detail-branches__bottom-wrapper">
            <div class="swiper-arrows">

  <div class="swiper-arrows__arrow swiper-button-prev">
    <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 left</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="4.75 0.75 0.75 4.75 4.75 8.75"/></g></g></svg>
  </span>
  </div>

  <div class="swiper-arrows__arrow swiper-button-next">
    <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>
  </div>
</div>
          </div>
        </div>
    </div>

    </div>
</section>

Schema

    {
  "props": {
    "branch_title": {
      "type": "string",
      "description": "Title of the component"
    },
    "branches_count": {
      "type": "number",
      "description": "Number of branches"
    },
    "link": {
      "type": "string",
      "description": "link"
    },
    "items": {
      "type": "array of objects",
      "description": "Branches of the component"
    }
  }
}