Links

Default

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/"
  }
} %}

          <a class="link --black" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

With icon

        {% include "@Components/link/link.twig" with {props: {
    title: "Read more",
    href: "https://www.google.com/",
    animation: "right",
    icon: {
      src: "images/svg/chevron-right.svg",
      size: "xs"
    }
  }
} %}

          <a class="link --black  --animation-right" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --xs">
      <img src="images/svg/chevron-right.svg"  loading="lazy">
  
  </span>
          </span>
  </a>

Icon left

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    animation: "zoom",
    iconBefore: true,
    icon: {
      src: "images/svg/clock.svg",
      size: "sm"
    }
  }
} %}

          <a class="link --black --icon-before --animation-zoom" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --sm">
      <img src="images/svg/clock.svg"  loading="lazy">
  
  </span>
          </span>
  </a>

Primary color

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    color: "primary",
  }
} %}

          <a class="link --primary" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

Conversion color

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    color: "conversion",
  }
} %}

          <a class="link --conversion" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

Light gray color

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    color: "light-gray",
  }
} %}

          <a class="link --light-gray" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

Gray color

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    color: "gray"
  }
} %}

          <a class="link --gray" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

Warning color

        {% include "@Components/link/link.twig" with {
  props : {
    title: "Read more",
    href: "https://www.google.com/",
    color: "warning"
  }
} %}

          <a class="link --warning" href="https://www.google.com/">
      <span class="link__title">
      <span class="link__title-wrap">Read more</span>
    </span>
    </a>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "color": {
      "type": "string",
      "description": "primary (default) | black | light-gray"
    },
    "extraClass": {
      "type": "string",
      "description": "extra class of button"
    },
    "url": {
      "type": "string",
      "description": "Url address (default # if tag is a)"
    },
    "animation": {
      "type": "string",
      "description": "right | zoom"
    },
    "iconBefore": {
      "type": "boolean",
      "description": "Set if icon will be before text"
    },
    "iconOnly": {
      "type": "boolean",
      "description": "Make button icon only."
    },
    "icon": {
      "type": "object",
      "props": {
        "src": "string",
        "description": "path to icon"
      }
    }
  }
}