Contact item

Email 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      email: "mail@email.cz",
      title:"stejskal@rkstejskal.cz",
    }
  }
%}

      
  •               <a class="i-contact" href="mailto:mail@email.cz">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 15.46"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>mail</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="18" height="13.96" rx="2.12" ry="2.12"/><path class="cls-1" d="M14.75,4.73l-3.38,2a3.14,3.14,0,0,1-3.24,0l-3.38-2"/></g></g></svg>
  </span>
  <span>stejskal@rkstejskal.cz</span>
</a>

Phone 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      number: "777257283",
      title: "+420 722 822 722",
    }
  }
%}

      
  •               <a class="i-contact" href="tel:+777257283">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.03 17.74"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>telefon</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M8,9.94A12.58,12.58,0,0,1,5.39,6.42a1.14,1.14,0,0,1,.23-1.28l.62-.63a1.54,1.54,0,0,0,0-2.21l-.9-.87A2.4,2.4,0,0,0,2,1.48l-.36.37A3.18,3.18,0,0,0,.82,4.73a15.7,15.7,0,0,0,4.57,7.86,15.81,15.81,0,0,0,8,4.35,3.22,3.22,0,0,0,2.86-.89l.36-.38a2.41,2.41,0,0,0-.05-3.4l-.61-.59a1.92,1.92,0,0,0-2.7,0l-.41.43a1.12,1.12,0,0,1-1.27.26A12.55,12.55,0,0,1,8,9.94Z"/></g></g></svg>

  </span>
  <span>+420 722 822 722</span>
</a>

Web 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      link: {
        url: "#",
        ico: {
          src: "svg/web.svg",
        }
      },
      title:" www.rkstejskal.cz",
    }
  }
%}

      
  •               <a class="i-contact" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="20.5" height="20.5" viewBox="0 0 20.5 20.5">
  <g id="Group" transform="translate(-1.25 -2.25)">
    <g id="Group-2" data-name="Group" transform="translate(2 3)">
      <path id="Path" d="M9,18a9,9,0,1,1,9-9" 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="M0,.5H16.98" transform="translate(0.51 5.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="M0,.5H9.49" transform="translate(0.51 11.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-4" data-name="Path" d="M8,9A15.476,15.476,0,0,0,5.832,1.06a2.114,2.114,0,0,0-3.665,0,15.629,15.629,0,0,0,0,15.881A2.125,2.125,0,0,0,4,18" transform="translate(5.001 0)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <path id="Path-5" data-name="Path" d="M5.686,1.719,3.419.132a.736.736,0,0,0-.841,0L.312,1.718a.733.733,0,0,0-.312.6V5.264A.733.733,0,0,0,.733,6H5.266A.733.733,0,0,0,6,5.265V2.318A.738.738,0,0,0,5.686,1.719Z" transform="translate(13 13.002)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>
  <span> www.rkstejskal.cz</span>
</a>

Linkedin 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      link: {
        url: "#",
        ico: {
          src: "svg/linkedin.svg",
        }
      },
      title:" linkedin",
    }
  }
%}

      
  •               <a class="i-contact" href="#">
  <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="Social_Media_Linkedin" data-name="Social, Media/Linkedin" transform="translate(-2.25 -2.25)">
    <g id="Group" transform="translate(0 0)">
      <path id="Path" d="M4.5,0h9A4.5,4.5,0,0,1,18,4.5v9.009A4.5,4.5,0,0,1,13.5,18H4.5A4.5,4.5,0,0,1,0,13.5v-9A4.5,4.5,0,0,1,4.5,0Z" transform="translate(3 3)" 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="M.5,0V5.4" transform="translate(7.62 11.1)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <g id="Group-2" data-name="Group" transform="translate(7 7)">
        <path id="Path-3" data-name="Path" d="M0,5.4V2.25A2.25,2.25,0,0,1,2.25,0h0A2.25,2.25,0,0,1,4.5,2.25V5.4" transform="translate(4.719 4.1)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
        <path id="Path-4" data-name="Path" d="M.5.275A.225.225,0,1,0,.725.5.224.224,0,0,0,.5.275" transform="translate(0.619 0.563)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      </g>
    </g>
  </g>
</svg>

  </span>
  <span> linkedin</span>
</a>

Instagram 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      link: {
        url: "#",
        ico: {
          src: "svg/instagram.svg",
        }
      },
      title: "instagram",
    }
  }
%}

      
  •               <a class="i-contact" href="#">
  <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="Social_Media_Instagram" data-name="Social, Media/Instagram" transform="translate(-2.25 -2.25)">
    <g id="Group" transform="translate(0 0)">
      <path id="Path" d="M4.5,0h9.009A4.5,4.5,0,0,1,18,4.5v9.009A4.5,4.5,0,0,1,13.5,18H4.5A4.5,4.5,0,0,1,0,13.5V4.5A4.5,4.5,0,0,1,4.5,0Z" transform="translate(3 3)" 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="M.5.162A.338.338,0,1,0,.837.5.339.339,0,0,0,.5.162" transform="translate(16.45 6.55)" 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="M6.146,1.054a3.6,3.6,0,1,1-5.091,0,3.6,3.6,0,0,1,5.091,0" transform="translate(8.4 8.4)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>
  <span>instagram</span>
</a>

Facebook 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
      link: {
        url: "#",
        ico: {
          src: "svg/facebook.svg",
        }
      },
      title: "Facebook",
    }
  }
%}

      
  •               <a class="i-contact" href="#">
  <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="Social_Media_Facebook" data-name="Social, Media/Facebook" transform="translate(-2.25 -2.25)">
    <g id="Group" transform="translate(0 0)">
      <path id="Path" d="M4.5,0h9A4.5,4.5,0,0,1,18,4.5v9.009A4.5,4.5,0,0,1,13.5,18H4.5A4.5,4.5,0,0,1,0,13.5v-9A4.5,4.5,0,0,1,4.5,0Z" transform="translate(3 3)" 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="M0,.5H5.4" transform="translate(11.1 12.4)" 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="M3.6,0H2.655A2.655,2.655,0,0,0,0,2.655V12.6" transform="translate(12.9 8.4)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>
  <span>Facebook</span>
</a>

Schema 

    {
  "props": {
    "email": {
      "type": "string",
      "description": "Email adress"
    },
    "title":{
      "type": "string",
      "description": "Title of conatct item"
    },
    "number": {
      "type": "number",
      "description": "Phone number"
    },
    "link": {
      "url": {
        "type": "string",
        "description": "Url adress"
      },
      "ico": {
        "src": {
          "type": "string",
          "description": "Path to icon"
        }
      }
    }
  }
}