---
name: link
title: Link
components:
  - sd-icon
  - sd-link
  - sd-list
version: 1.0.0
---

## Template: Link with Icon

```html
<sd-link href="http://union-investment.com" standalone>
  <sd-icon name="system/home" slot="icon-left"></sd-icon>
  Union Investment
</sd-link>
<p class="mt-4">
  While the list above shows standalone links, we now will link to the
  <sd-link href="https://cd.union-investment.de">
    CD Toolbox
    <sd-icon name="system/external-link" slot="icon-right"></sd-icon>
  </sd-link>
  inside a paragraph.
</p>
```

## Template: Link List

```html
<ul class="link-list">
  <li class="mb-5">
    <sd-link
      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
      size="lg"
    >
      About us
    </sd-link>
  </li>
  <li class="mb-5">
    <sd-link
      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
      size="lg"
    >
      Our funds at a glance
    </sd-link>
  </li>
  <li class="mb-5">
    <sd-link
      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
      size="lg"
    >
      Sustainable investments
    </sd-link>
  </li>
  <li>
    <sd-link
      href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
      size="lg"
    >
      Latest expert views and analyses
    </sd-link>
  </li>
</ul>
```

## Template: anchor Link List

```html
<div class="flex flex-row gap-4">
  <sd-link href="#" class="font-bold" standalone>
    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
    Assets under management
  </sd-link>
  <sd-link href="#" class="font-bold" standalone>
    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
    Protecting is our priority
  </sd-link>
  <sd-link href="#" class="font-bold" standalone>
    <sd-icon name="system/anchor-link" slot="icon-left"></sd-icon>
    Sustainability
  </sd-link>
</div>
```