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">
      <img src="images/svg/mail.svg" alt="Email" loading="lazy">
  
  </span>
  <span class="" >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">
      <img src="images/svg/phone.svg" alt="Telefon" loading="lazy">
  
  </span>
  <span class="" >+420 722 822 722</span>
</a>

Web 

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

      
  •               <a class="i-contact" href="#"  >
  <span class="icon">
      <img src="images/svg/web.svg"  loading="lazy">
  
  </span>
  <span class="" > www.rkstejskal.cz</span>
</a>

Linkedin 

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

      
  •               <a class="i-contact" href="#"  >
  <span class="icon">
      <img src="images/svg/linkedin.svg"  loading="lazy">
  
  </span>
  <span class="" > linkedin</span>
</a>

Instagram 

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

      
  •               <a class="i-contact" href="#"  >
  <span class="icon">
      <img src="images/svg/instagram.svg"  loading="lazy">
  
  </span>
  <span class="" >instagram</span>
</a>

Facebook 

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

      
  •               <a class="i-contact" href="#"  >
  <span class="icon">
      <img src="images/svg/facebook.svg"  loading="lazy">
  
  </span>
  <span class="" >Facebook</span>
</a>

Telefon schovan 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
        number: '+420123456789',
        titleHidden: '+420 123 456 789',
        title: 'zobrazit telefon',
    }
} %}

      
  •               <a class="i-contact" href="tel:+420123456789" data-hidden-content-on-click="+420 123 456 789" >
  <span class="icon">
      <img src="images/svg/phone.svg" alt="Telefon" loading="lazy">
  
  </span>
  <span class="" data-hidden-content-target>zobrazit telefon</span>
</a>

Telefon schovan + doplnujici text 

  •         {% include "@Components/items/contact-item/contact-item.twig" with {
    props: {
        number: '+420123456789',
        titleHidden: '+420 123 456 789',
        additionalText: 'Uveďte kód ČESKÉREALITY',
        title: 'zobrazit telefon',
    }
} %}

      
  •               <a class="i-contact" href="tel:+420123456789" data-hidden-content-on-click="+420 123 456 789" data-hidden-content-additional-text="Uveďte kód ČESKÉREALITY">
  <span class="icon">
      <img src="images/svg/phone.svg" alt="Telefon" loading="lazy">
  
  </span>
  <span class="" data-hidden-content-target>zobrazit telefon</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"
        }
      }
    }
  }
}