Contact item
-
{% 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>
-
{% 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>
-
{% 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>
-
{% 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"
}
}
}
}
}