Stylebook

Facebook

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      facebook: "https://www.facebook.com/ceskereality.cz",
      blank: true
    }
  }
%}

            
    <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-facebook.svg" alt="Facebook" loading="lazy">
  
  </span>

  </a>

Twitter

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      twitter: "https://twitter.com/ceske_reality?lang=cs",
      blank: true
    }
  }
%}

                <a class="footer-social" href="https://twitter.com/ceske_reality?lang=cs" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-x-twitter.svg" alt="X" loading="lazy">
  
  </span>

  </a>

Androis app

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      android_app:"https://play.google.com/store/apps/details?id=cz.agentes.ceskereality",
      blank: true
    }
  }
%}

                <a class="footer-social" href="https://play.google.com/store/apps/details?id=cz.agentes.ceskereality" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-android-app.svg"  loading="lazy">
  
  </span>

  </a>

Email

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      email:"ceskereality@gmail.com"
    }
  }
%}

              <a class="footer-social" href="mailto:ceskereality@gmail.com">
  <span class="icon  --xl">
      <img src="images/svg/social-mail.svg" alt="Email" loading="lazy">
  
  </span>

  </a>

Custom

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      custom:{
        url: "https://www.facebook.com/ceskereality.cz",
        ico: {
          src: "images/svg/social-plus.svg"
          }
      },
      blank: true,
    }
  }
%}

                <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-plus.svg"  loading="lazy">
  
  </span>

  </a>

With title

ČESKÉREALITY.cz PLUS

        {% include "@Components/footer-social/footer-social.twig" with {
    props: {
      custom:{
        url: "https://www.facebook.com/ceskereality.cz",
        ico: {
          src: "images/svg/social-plus.svg"
          }
      },
      title: "ČESKÉREALITY.cz PLUS",
      blank: true,
    }
  }
%}

                <a class="footer-social" href="https://www.facebook.com/ceskereality.cz" target="_blank">
  <span class="icon  --xl">
      <img src="images/svg/social-plus.svg"  loading="lazy">
  
  </span>

      <span>
      ČESKÉREALITY.cz PLUS
    </span>
  </a>

Schema

    {
  "props": {
    "facebook": {
      "type": "string",
      "description": "Facebook url adress"
    },
    "email": {
      "type": "string",
      "description": "Email adress"
    },
    "twitter": {
      "type": "string",
      "description": "Twitter url adress"
    },
    "android_app": {
      "type": "string",
      "description": "Android app adress"
    },
    "custom": {
      "url":{
        "type": "string",
        "description": "Url adress"
      },
      "ico":{
        "src":{
          "type": "string",
          "description": "Path to icon"
        }
      }
    },
    "title":{
      "type": "string",
      "description": "Title of the component"
    },
    "blank": {
      "type": "boolean",
      "description": "true | undefined"
    }
  }
}