• 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

Facebook

  • Preview
  • Twig
  • Html 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      facebook: "https://www.facebook.com/ceskereality.cz",
      blank: true
    }
  }
%}

      
  •             
    <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>

Twitter

  • Preview
  • Twig
  • Html 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      twitter: "https://twitter.com/ceske_reality?lang=cs",
      blank: true
    }
  }
%}

      
  •                 <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>

Androis app

  • Preview
  • Twig
  • Html 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      android_app:"https://play.google.com/store/apps/details?id=cz.agentes.ceskereality",
      blank: true
    }
  }
%}

      
  •                 <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>

Email

  • Preview
  • Twig
  • Html 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      email:"ceskereality@gmail.com"
    }
  }
%}

      
  •               <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>

Custom

  • Preview
  • Twig
  • Html 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      custom:{
        url: "https://www.facebook.com/ceskereality.cz",
        ico: {
          src: "svg/social-plus.svg"
          }
      },
      blank: true,
    }
  }
%}

      
  •                 <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>

  </a>

With title

  • Preview
  • Twig
  • Html
  • ČESKÉREALITY.cz PLUS 
  •         {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      custom:{
        url: "https://www.facebook.com/ceskereality.cz",
        ico: {
          src: "svg/social-plus.svg"
          }
      },
      title: "ČESKÉREALITY.cz PLUS",
      blank: true,
    }
  }
%}

      
  •                 <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>

Schema 

    {
  "props": {
    "facebook": {
      "type": "string",
      "description": "Facebook url adress"
    },
    "email": {
      "type": "string",
      "description": "Email adress"
    },
    "twitter": {
      "type": "string",
      "description": "Twitter url adress"
    },
    "android_app": {
      "type": "string",
      "description": "Android app adress"
    },
    "custom": {
      "url":{
        "type": "string",
        "description": "Url adress"
      },
      "ico":{
        "src":{
          "type": "string",
          "description": "Path to icon"
        }
      }
    },
    "title":{
      "type": "string",
      "description": "Title of the component"
    },
    "blank": {
      "type": "boolean",
      "description": "true | undefined"
    }
  }
}