Links

id: w-c-2

Default

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

          <a class="link d-inline-flex u-fw-600 align-items-center" href="https://www.google.com/" title="Read more">
      <span class="link__title">Read more</span>
  
  
  </a>

With icon

Preview

Twig

Html

        {% include "@Components/link/link.twig" with {props: {
  title: "Read more",
  url: "https://www.google.com/",
  color: "black",
  animation: "right",
  icon: {
    src: "@Images/svg/chevron-right.svg",
    size: "sm",
  },
}} %}

          <a class="link d-inline-flex u-fw-600 align-items-center --black  --animation-right" href="https://www.google.com/" title="Read more">
      <span class="link__title">Read more</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --black --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>      </span>
    </span>
  
  </a>

Icon left

Preview

Twig

Html

        {% include "@Components/link/link.twig" with {props: {
  title: "Read more",
  url: "https://www.google.com/",
  animation: "zoom",
  color: "primary",
  icon_before: true,
  icon: {
    src: "@Images/svg/clock.svg",
    size: "lg",
  },
}} %}

          <a class="link d-inline-flex u-fw-600 align-items-center --primary --icon-before --animation-zoom" href="https://www.google.com/" title="Read more">
      <span class="link__title">Read more</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary --lg">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>

Primary color

Preview

Twig

Html

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

          <a class="link d-inline-flex u-fw-600 align-items-center --primary" href="https://www.google.com/" title="Read more">
      <span class="link__title">Read more</span>
  
  
  </a>

Underline initial

Preview

Twig

Html

Underline initial

        {% include "@Components/link/link.twig" with {props: {
    title: "Underline initial",
    url: "https://www.google.com/",
    color: "primary",
    underline_initial: true,
    icon: {
      src: "@Images/svg/clock.svg",
      size: "lg",
    },
  }
} %}

          <a class="link d-inline-flex u-fw-600 align-items-center --primary   --underline-initial" href="https://www.google.com/" title="Underline initial">
      <span class="link__title">Underline initial</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary --lg">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>