Stylebook

Column with nav

Služby

        {% 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">
      <div class="base-h2 footer-column__heading">Služby</div>
  
      <ul class="g-footer-nav">
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

      <a class="link --light-gray" 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="#">
      <span class="link__title">
      <span class="link__title-wrap">Ochrana osobních údajů </span>
    </span>
    </a>

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

      <a class="link --light-gray" 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

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: "images/svg/social-plus.svg"
            }
        },
        title: "ČESKÉREALITY.cz PLUS",
        blank: true,
      }
    ]
    }
  }
%}

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

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

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

    </li>
      <li>

      <a class="link --light-gray" 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">
      <img src="images/svg/social-plus.svg"  loading="lazy">
  
  </span>

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

Column with info, subtitle and footer social

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">
      <div class="base-h2 footer-column__heading">Služby</div>
  
  
      <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>
  
      <div class="base-h2 footer-column__subheading">Buďte ve spojení</div>
  
      <ul class="footer-social-group">
      <li>
        
    <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-facebook.svg" alt="Facebook" loading="lazy">
  
  </span>

  </a>
    </li>
      <li>
            <a class="footer-social" href="https://twitter.com/ceske_reality?lang=cs" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-x-twitter.svg" alt="X" loading="lazy">
  
  </span>

  </a>
    </li>
      <li>
          <a class="footer-social" href="mailto:ceskereality@gmail.com">
  <span class="icon  --xl">
      <img src="images/svg/social-mail.svg" alt="Email" loading="lazy">
  
  </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">
      <img src="images/svg/social-android-app.svg"  loading="lazy">
  
  </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"
      },
      "extraClass": {
        "type": "string",
        "description": "extra class of nav"
      },
      "attributes": {
        "type": "array",
        "description": "HTML attributes set [\"data-project\"] to load bug report form"
      }
    },
    "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`."
    }
  }
}