• Index
  • Core
    • button
    • link
    • base-header
    • base-section
    • img
    • icon
    • swiper-arrows
    • splide-arrows
    • cta-button
    • tooltip
    • badge
    • pagination-arrow
    • pagination
    • splide-arrows
    • footer-social
    • footer-column
    • footer
    • share
    • share-button
    • overview-button
    • energy-label
    • breadcrumbs
    • side-menu
    • modal
    • review-feedback
    • feedback
  • Sections
    • category-cards-section
    • real-estate-section
    • dev-project-slide-section
    • re-agency-description-section
    • re-agency-detail-branches-section
    • usp-section
    • link-navigation-section
    • posts-slide-section
    • dev-project-slide-section
    • filter-table-section
    • highlited-broker-section
    • broker-detail-section
    • real-estate-agency-header-section
    • real-estate-agency-content-section
    • base-section-side-menu
    • estates-slide-section
    • re-agency-form-section
    • map-section
    • broker-review-slide-section
    • estate-detail-content-section
    • category-nav-section
    • usp-base-section
    • post-detail-section
    • re-agents-section
    • posts-section
    • estates-content-section
    • estate-info-section
    • estate-detail-intro-section
  • Items
    • category-card-item
    • statistical-item
    • usp-item
    • overview-item
    • dev-project-slide-item
    • count-item
    • star-item
    • rating-item
    • broker-meta-item
    • highlighted-broker-item
    • post-slide-item
    • more-posts-item
    • broker-chart-item
    • contact-item
    • pagination-item
    • estate-slide-item
    • branch-item
    • broker-review-item
    • review-chart-item
    • broker-review-response-item
    • social-link-item
    • re-agents-item
    • estate-item
    • info-item
    • estate-detail-intro-item
  • Forms
    • input-field
    • search-field
    • radio
    • radio-fieldset
    • checkbox
    • checkbox-fieldset
    • switch
    • dropdown
    • textarea
    • option-switch
  • Subsections
    • current-info-subsection

Column with nav

  • Preview
  • Twig
  • Html

  • Služby

    • Inzerce pro RK
    • Registrovat RK
    • Ceník inzerce
    • Všeobecné podmínky
    • Ochrana osobních údajů
    • Exportní programy
    • Topování
    • Pravidla inzerce
    • Soukromá inzerce
    • Realitní hlídač
    • Vzory smluv
    • Nacenění nemovitosti
    • Nahlásit chybu 
  •         {% include "@Components/footer-column/footer-column.twig" with {
    props: {
      title: "Služby",
      nav: [
    {
      title: "Inzerce pro RK ",
      href: "#"
    },{
      title: "Registrovat RK ",
      href: "#"
    },
    {
      title: "Ceník inzerce ",
      href: "#"

    },{
      title: "Všeobecné podmínky",
      href: "#"
    },
    {
      title: "Ochrana osobních údajů ",
      href: "#"
    },{
      title: "Exportní programy",
      href: "#"
    },{
      title: "Topování",
      href: "#"
    },{
      title: "Pravidla inzerce ",
      href: "#"
    },{
      title: "Soukromá inzerce ",
      href: "#"
    },{
      title: "Realitní hlídač",
      href: "#"
    },{
      title: "Vzory smluv",
      href: "#"
    },{
      title: "Nacenění nemovitosti ",
      href: "#"
    },{
      title: "Nahlásit chybu",
      href: "#"
    }
  ]
    }
  }
%}

      
  •           <div class="footer-column">
      <h2 class="base-h2 footer-column__heading">Služby</h2>
  
      <ul class="g-footer-nav">
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Inzerce pro RK </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Registrovat RK </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ceník inzerce </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Všeobecné podmínky</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ochrana osobních údajů </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Exportní programy</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Topování</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Pravidla inzerce </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Soukromá inzerce </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Realitní hlídač</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Vzory smluv</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Nacenění nemovitosti </span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Nahlásit chybu</span>
  </span>

  </a>

    </li>
  </ul>
  
  
  
  </div>

Column with nav and custom footer social

  • Preview
  • Twig
  • Html

  • Služby

    • Katalog RK
    • Články
    • Byty
    • Domy
    • Pozemky
    • Rekreační objekty
    • Komerční prostory
    • Zahraniční
    • Ostatní
    • Reference
    • ČESKÉREALITY.cz PLUS 
  •         {% include "@Components/footer-column/footer-column.twig" with {
    props: {
      title: "Služby",
      nav: [
    {
      title: "Katalog RK",
      href: "#"
    },{
      title: "Články",
      href: "#"
    },
    {
      title: "Byty",
      href: "#"
    },{
      title: "Domy",
      href: "#"
    },
    {
      title: "Pozemky",
      href: "#"
    },{
      title: "Rekreační objekty",
      href: "#"
    },{
      title: " Komerční prostory",
      href: "#"
    },{
      title: "Zahraniční",
      href: "#"
    },{
      title: "Ostatní",
      href: "#"
    },{
      title: "Reference",
      href: "#"
    }
  ],
      socials:[
      {
        custom:{
          url: "https://www.facebook.com/ceskereality.cz",
          ico: {
            src: "svg/social-plus.svg"
            }
        },
        title: "ČESKÉREALITY.cz PLUS",
        blank: true,
      }
    ]
    }
  }
%}

      
  •           <div class="footer-column">
      <h2 class="base-h2 footer-column__heading">Služby</h2>
  
      <ul class="g-footer-nav">
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Katalog RK</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Články</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Byty</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Domy</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Pozemky</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Rekreační objekty</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap"> Komerční prostory</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Zahraniční</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Ostatní</span>
  </span>

  </a>

    </li>
      <li>

      <a class="link --light-gray" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Reference</span>
  </span>

  </a>

    </li>
  </ul>
  
  
  
      <ul class="footer-social-group">
      <li>
            <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="34.5" height="34.5" viewBox="0 0 34.5 34.5">
  <g id="Group_9" data-name="Group 9" transform="translate(-739.25 -2797.25)">
    <g id="Group" transform="translate(740 2798.25)">
      <g id="Group-2" data-name="Group" transform="translate(0 0)">
        <circle id="Oval" cx="16.5" cy="16.5" r="16.5" transform="translate(0 -0.25)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      </g>
    </g>
    <path id="Path_17" data-name="Path 17" d="M0,0V12" transform="translate(756.5 2808.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/>
    <path id="Path_18" data-name="Path 18" d="M0,0V12" transform="translate(750.5 2814.5) rotate(-90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>

      <span>
      ČESKÉREALITY.cz PLUS
    </span>
  </a>
    </li>
  </ul>
  </div>

Column with info, subtitle and footer social

  • Preview
  • Twig
  • Html

  • Služby

    Adresa
    Český internet s.r.o.
    Kostelní 942/46
    370 04 České Budějovice
    www.ceskyinternet.cz

    Buďte ve spojení

  •         {% include "@Components/footer-column/footer-column.twig" with {
    props: {
      title: "Služby",
      info: "Adresa <br> Český internet s.r.o. <br> Kostelní 942/46 <br> 370 04 České Budějovice <br> www.ceskyinternet.cz",
      subtitle: "Buďte ve spojení",
      socials:[
      {
      facebook: "https://www.facebook.com/ceskereality.cz",
      blank: true
      },{
      twitter: "https://twitter.com/ceske_reality?lang=cs",
      blank: true
      },{
      email:"ceskereality@gmail.com"
      },{
      android_app:"https://play.google.com/store/apps/details?id=cz.agentes.ceskereality",
      blank: true
      }
      ]
    }
  }
%}

      
  •           <div class="footer-column">
      <h2 class="base-h2 footer-column__heading">Služby</h2>
  
  
      <p class="footer-column__perex">Adresa <br> Český internet s.r.o. <br> Kostelní 942/46 <br> 370 04 České Budějovice <br> www.ceskyinternet.cz</p>
  
      <h3 class="base-h2 footer-column__subheading">Buďte ve spojení</h3>
  
      <ul class="footer-social-group">
      <li>
        
    <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="34.5" height="34.5" viewBox="0 0 34.5 34.5">
  <g id="Group" transform="translate(0.75 1)">
    <g id="Group-2" data-name="Group" transform="translate(0 0)">
      <path id="Path" d="M0,.5H7.583" transform="translate(12.583 14.752)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-2" data-name="Path" d="M5.055,0H3.729A3.73,3.73,0,0,0,0,3.729V14.885" transform="translate(15.113 8.933)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <circle id="Oval" cx="16.5" cy="16.5" r="16.5" transform="translate(0 -0.25)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>

  </a>
    </li>
      <li>
            <a class="footer-social" href="https://twitter.com/ceske_reality?lang=cs" target="_blank">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="34.5" height="34.5" viewBox="0 0 34.5 34.5">
  <g id="Group" transform="translate(1.151 1)">
    <g id="Group-2" data-name="Group" transform="translate(0 0)">
      <circle id="Oval" cx="16.5" cy="16.5" r="16.5" transform="translate(-0.401 -0.25)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Shape" d="M6.878,16.7c-4.007,0-5.6-2.179-6.878-3.929.029-.006,2.453-.817,2.938-.98l.009,0-.059-.059-.161-.171A9.08,9.08,0,0,1,1.965,0a9.883,9.883,0,0,0,5.9,4.912,5.237,5.237,0,0,1,1.407-3.52A4.775,4.775,0,0,1,12.773,0,4.3,4.3,0,0,1,16.7,1.965H19.65L17.685,4.912a12.561,12.561,0,0,1-2.825,8.474A10.274,10.274,0,0,1,6.878,16.7Z" transform="translate(7.369 9.388)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>

  </a>
    </li>
      <li>
          <a class="footer-social" href="mailto:ceskereality@gmail.com">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="34.5" height="34.5" viewBox="0 0 34.5 34.5">
  <g id="Group" transform="translate(0.75 0.75)">
    <g id="Group-2" data-name="Group" transform="translate(-0.199 0.25)">
      <circle id="Oval" cx="16.5" cy="16.5" r="16.5" transform="translate(0.199 -0.25)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path" d="M14.887,14.887H3.722A3.721,3.721,0,0,1,0,11.165V3.722A3.721,3.721,0,0,1,3.722,0H14.887a3.721,3.721,0,0,1,3.722,3.722v7.443a3.721,3.721,0,0,1-3.722,3.722Z" transform="translate(7.071 8.931)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-2" data-name="Path" d="M16.428,0,10.541,5.887h0a3.291,3.291,0,0,1-4.652,0h0L0,0" transform="translate(8.161 10.022)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-3" data-name="Path" d="M6.308,0,0,6.308" transform="translate(7.742 15.91)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-4" data-name="Path" d="M0,0,6.308,6.308" transform="translate(18.7 15.91)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>

  </a>
    </li>
      <li>
            <a class="footer-social" href="https://play.google.com/store/apps/details?id=cz.agentes.ceskereality" target="_blank">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="34.25" height="34.249" viewBox="0 0 34.25 34.249">
  <g id="Group" transform="translate(0.75 0.75)">
    <g id="Group-2" data-name="Group" transform="translate(0 0)">
      <path id="Path" d="M27.954,4.8A16.375,16.375,0,1,1,4.8,4.8a16.376,16.376,0,0,1,23.158,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-2" data-name="Path" d="M0,1.406V16.182A1.4,1.4,0,0,0,2.1,17.4l13-7.387a1.4,1.4,0,0,0,0-2.44L2.1.185A1.4,1.4,0,0,0,0,1.406Z" transform="translate(10.426 7.582)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-3" data-name="Path" d="M0,12.085,10.218,0" transform="translate(10.742 12.559)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-4" data-name="Path" d="M0,0,10.218,12.085" transform="translate(10.742 8.105)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>

  </a>
    </li>
  </ul>
  </div>

Schema 

    {
  "props": {
    "title":{
      "type": "string",
      "description": "Title of the component"
    },
    "nav": {
      "type": "array od objets",
      "title": {
        "type": "string",
        "description": "Title of the link"
      },
      "href": {
        "type": "string",
        "description": "Url adress"
      }
    },
    "info": {
      "type": "string",
      "description": "Info about component, can include < br >"
    },
    "subtitle": {
      "type": "string",
      "description": "Subtitle od the component"
    },
    "socials": {
      "type": "array od objets",
      "description": "All props are documented by the component `footer-social`."
    }
  }
}