```js
<>
  <p>
    <SilkeLink target="_blank" href="https://www.vev.design" external>
      External link is marked with icon
    </SilkeLink>
  </p>

  <p>
    <SilkeLink kind="secondary" target="_blank" href="https://www.vev.design" external>
      Secondary Link
    </SilkeLink>
  </p>

  <p style={{ fontSize: '30px' }}>
    <SilkeLink target="_blank" href="https://www.vev.design" external>
      Icon scales with font size
    </SilkeLink>
  </p>

  <p>
    <SilkeLink target="_blank" href="https://www.vev.design" standalone>
      Standalone link are not underlined until hovered
    </SilkeLink>
  </p>

  <p>
    <SilkeRouterLink to="/components/silke-image/silke-image" standalone>
      Standalone routerlink are also not underlined until hovered
    </SilkeRouterLink>
  </p>

  <p>
    <SilkeLink href="https://www.google.com" target="_blank">
      Links in new window get proper rel attribte
    </SilkeLink>
  </p>

  <p>
    <SilkeRouterLink to="/components/silke-image/silke-image">
      Links to internal pages use SilkeRouterLink
    </SilkeRouterLink>
  </p>

  <div>
    <SilkeButtonLink
      onClick={() => {
        alert('Hello!');
      }}
    >
      Button styled as link
    </SilkeButtonLink>
  </div>

  <p>
    <a href="https://www.google.com" rel="button">
      rel="button" still removes link styling
    </a>
  </p>

  <div>
    <SilkeButtonLink icon="image" standalone onClick={() => alert('Hello!')}>
      Button styled as link with icon
    </SilkeButtonLink>
  </div>
</>
```