Share

Default 

  •         {% include "@Components/share/share.twig" with {
  props : {
   cta_button: {
      extraClass: "extra-class",
      icon: {
        path: "svg/share.svg",
        color: "primary",
        size: "lg",
      }
    },
    share_buttons:[
    {
      variant: "whatsapp",
      url: "whatsapp://send?text=https://youtu.be/989-7xsRLR4?t=34",
      tag:"a",
      icon: {
        src: "svg/whatsapp.svg",}
    }
    ,{
      variant: "messenger",
      url: "fb-messenger://share/?link=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "svg/messenger.svg",}
    },{
      variant: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "svg/facebook-share.svg",}
    },{

      variant: "twitter",
      url: "https://twitter.com/home?status=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "svg/twitter.svg",}
    },{
      variant: "print",
      tag: "button",
      type:"button",
      icon: {
        src: "svg/print.svg",}
    },{
      variant: "copy",
      tag: "button",
      type:"button",
      icon: {
        src: "svg/copy-url.svg",}
    },{
      variant: "mail",
      url:"mailto:?&body=https://youtu.be/989-7xsRLR4?t=34",
      icon: {
        src: "svg/send-mail.svg",}
    }]
  }
}
 %}

      
  •           <div class="share">
  <span class="cta-button  extra-class">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="25.51" height="28.94" viewBox="0 0 25.51 28.94">
  <g id="Group_62" data-name="Group 62" transform="translate(-337.246 -83.529)">
    <circle id="Oval" cx="4.335" cy="4.335" r="4.335" transform="translate(337.996 93.664)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <circle id="Oval-2" data-name="Oval" cx="4.335" cy="4.335" r="4.335" transform="translate(353.336 84.279)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <circle id="Oval-3" data-name="Oval" cx="4.335" cy="4.335" r="4.335" transform="translate(353.336 103.049)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path" d="M0,4.855,7.945,0" transform="translate(346.016 90.863)" 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,0,7.944,4.855" transform="translate(346.016 100.283)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
  </div>

  </span>
  <ul class="g-share-buttons">
      <li>
      <a class="share-button --whatsapp" href=''>
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.01 19.09"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>whatsup</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.71,3.31A8.71,8.71,0,0,0,2,13.82L.75,18.34l4.62-1.21a8.79,8.79,0,0,0,4.17,1.06h0a8.73,8.73,0,0,0,8.72-8.72A8.62,8.62,0,0,0,15.71,3.31Z"/><path class="cls-1" d="M13.68,12.85h0a1.1,1.1,0,0,0-.27-1.76l-.73-.38a1.08,1.08,0,0,0-1.29.2h0a1.12,1.12,0,0,1-1.37.16A6.22,6.22,0,0,1,8,9a1.12,1.12,0,0,1,.16-1.37h0a1.08,1.08,0,0,0,.2-1.29L8,5.64A1.1,1.1,0,0,0,6.2,5.37h0a4,4,0,0,0-.58,5A10.62,10.62,0,0,0,7,12.05a10.21,10.21,0,0,0,1.72,1.38A4,4,0,0,0,13.68,12.85Z"/></g></g></svg>
  </span>
</a>
    </li>
      <li>
      <a class="share-button --messenger" href=''>
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 19.58"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>messenger</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M14.5,7.36l-4,3m0,0L8.89,7.89m0,0L5,10.8"/><path class="cls-1" d="M18.75,9.08c0,4.54-4.05,8.18-9,8.18a9.56,9.56,0,0,1-1.87-.18"/><path class="cls-1" d="M4.35,15.62A8,8,0,0,1,.75,9.08"/><path class="cls-1" d="M4.35,15.62v3.21"/><path class="cls-1" d="M.75,8.93C.75,4.39,4.8.75,9.75.75s9,3.64,9,8.18"/><line class="cls-1" x1="7.88" y1="17.08" x2="4.35" y2="18.83"/></g></g></svg>
  </span>
</a>
    </li>
      <li>
      <a class="share-button --facebook" href=''>
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
  <g id="Group" transform="translate(0.5 0.5)">
    <g id="Group-2" data-name="Group">
      <rect id="Rectangle" width="24" height="24" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
      <path id="Path" d="M0,.5H4.631" transform="translate(9.684 10.814)" 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="M3.087,0h-.81A2.278,2.278,0,0,0,0,2.277V9.09" transform="translate(11.229 7.455)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      <circle id="Oval" cx="10" cy="10" r="10" transform="translate(2 2)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>
</a>
    </li>
      <li>
      <a class="share-button --twitter" href=''>
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 16.8"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>twitter</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M17,5.25c0,6.3-3.6,10.8-9.9,10.8-3.6,0-5-1.88-6.3-3.6m0,0,2.7-.9A8.33,8.33,0,0,1,2.55.75,9.09,9.09,0,0,0,8,5.25a4.38,4.38,0,0,1,4.5-4.5,3.92,3.92,0,0,1,3.6,1.8h2.7L17,5.25"/></g></g></svg>
  </span>
</a>
    </li>
      <li>
        <button class="share-button --print" type="button">
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 19.5">
<defs>
<style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style>
</defs><title>tisk</title>
<g id="Vrstva_2" data-name="Vrstva 2">
<g id="Vrstva_1-2" data-name="Vrstva 1">
<path class="cls-1" d="M6.51.75H13a1.57,1.57,0,0,1,1.57,1.57V5.75a0,0,0,0,1,0,0H4.94a0,0,0,0,1,0,0V2.32A1.57,1.57,0,0,1,6.51.75Z"/>
<path class="cls-1" d="M4.75,11.75h10a0,0,0,0,1,0,0V17A1.79,1.79,0,0,1,13,18.75H6.54A1.79,1.79,0,0,1,4.75,17V11.75A0,0,0,0,1,4.75,11.75Z"/><line class="cls-1" x1="4.75" y1="11.75" x2="14.75" y2="11.75"/>
<line class="cls-1" x1="2.92" y1="8.75" x2="3.92" y2="8.75"/><path class="cls-1" d="M4.75,14.75h-3a1,1,0,0,1-1-1v-7a1,1,0,0,1,1-1h16a1,1,0,0,1,1,1v7a1,1,0,0,1-1,1h-3"/></g></g></svg>

  </span>
</button>
    </li>
      <li>
        <button class="share-button --copy" type="button">
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" width="19.508" height="18.507" viewBox="0 0 19.508 18.507">
  <g id="Interface_Essential_attachment-link.3" data-name="Interface, Essential/attachment-link.3" transform="translate(-2.246 -2.246)">
    <g id="Group" transform="translate(-0.005 -0.005)">
      <path id="Path" d="M0,10l.953.953a4,4,0,0,0,5.659,0L9.645,7.925a4.643,4.643,0,0,0,0-6.566h0a4.643,4.643,0,0,0-6.566,0l-.887.888" transform="translate(10.004 3.001)" 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="M11,2.126l-.953-.953a4,4,0,0,0-5.659,0L1.36,4.2a4.643,4.643,0,0,0,0,6.566h0a4.643,4.643,0,0,0,6.566,0l.887-.888" transform="translate(3.001 7.879)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    </g>
  </g>
</svg>

  </span>
</button>
    </li>
      <li>
      <a class="share-button --mail" href=''>
  <span class="icon  --lg">
  <svg xmlns="http://www.w3.org/2000/svg" width="18.78" height="18.131" viewBox="0 0 18.78 18.131">
  <g id="Emails_Mail_Email_Letter_Send" data-name="Emails/Mail, Email, Letter, Send" transform="translate(-2.61 -3.117)">
    <g id="Group" transform="translate(0.48 0)">
      <g id="Group-2" data-name="Group" transform="translate(2.88 3.84)">
        <path id="Path" d="M.48,0V6.709" transform="translate(15.84 1.957)" 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.76.48H0" transform="translate(11.52 13.947)" 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,0,1.92,1.92,0,3.84" transform="translate(15.36 12.507)" 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="M7.68,10.549H1.92A1.919,1.919,0,0,1,0,8.629V0" transform="translate(0 1.957)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
        <path id="Path-5" data-name="Path" d="M1.931,0H14.39a1.931,1.931,0,0,1,1.931,1.931h0a1.93,1.93,0,0,1-.848,1.6L10.331,7.014a3.87,3.87,0,0,1-4.341,0L.848,3.529A1.931,1.931,0,0,1,0,1.932H0A1.93,1.93,0,0,1,1.931,0Z" transform="translate(0 0.027)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
      </g>
    </g>
  </g>
</svg>

  </span>
</a>
    </li>
  </ul>
</div>

Schema 

    {
  "props": {
    "cta_button": {
      "type": "objects",
      "description": "All props are documented by the component `cta-button`."
    },
    "share_buttons": {
      "type": "array of objects",
      "description": "All props are documented by the component `share-button`."
    }
  }
}