Stylebook

Phone

        {% include "@Components/items/broker-meta-item/broker-meta-item.twig" with {
    props: {
      number: "777257283"
    }
  }
%}

            
  <a class="i-broker-meta" href="tel:+777257283">
  <span class="icon  --sm">
  <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>
</a>

Email

        {% include "@Components/items/broker-meta-item/broker-meta-item.twig" with {
    props: {
      email: "mail@email.cz"
    }
  }
%}

              <a class="i-broker-meta" href="mailto:mail@email.cz">
  <span class="icon  --sm">
  <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>
</a>

Link

        {% include "@Components/items/broker-meta-item/broker-meta-item.twig" with {
    props: {
      url: "#"
    }
  }
%}

              <a class="i-broker-meta" href="#">
  <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="19.508" height="15.508" viewBox="0 0 19.508 15.508">
  <g id="Group_525" data-name="Group 525" transform="translate(-537.25 -3278.242)">
    <path id="Path" d="M.9,1.833A4.422,4.422,0,0,0,0,4.5,4.5,4.5,0,0,0,4.5,9H10a4.5,4.5,0,0,0,0-9H7.2" transform="translate(538 3283.996)" 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="M13.606,7.171a4.422,4.422,0,0,0,.9-2.669A4.5,4.5,0,0,0,10,0H4.5a4.5,4.5,0,0,0,0,9H7.3" transform="translate(541.502 3278.992)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
</a>

Schema

    {
  "props": {
    "number": {
      "type": "number",
      "description": "Phone number"
    },
    "email": {
      "type": "string",
      "description": "Email adress"
    },
    "url": {
      "type": "string",
      "description": "Url address"
    }
  }
}