## Default

```html
<ul class="syn-link-list syn-link-list--medium">
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
</ul>
```

---

## Horizontal

Use the horizontal attribute to indicate that it is used as a horizontal link list.

```html
<ul class="syn-link-list syn-link-list--horizontal">
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
</ul>
```

---

## Multiline

The horizontal link list automatically wraps into a new line if there is not enough space available.

```html
<ul class="syn-link-list syn-link-list--horizontal" style="width: 480px">
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
  <li>
    <a href="javascript:void()" class="syn-link syn-link--medium">
      <syn-icon name="keyboard_arrow_right"></syn-icon>
      Link
    </a>
  </li>
</ul>
```

---

## Size

Use the size attribute to change the link list size.

```html
<div style="display: flex; flex-direction: column; gap: 24px">
  <ul class="syn-link-list syn-link-list--small syn-link-list--horizontal">
    <li>
      <a href="javascript:void()" class="syn-link syn-link--small">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--small">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--small">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--small">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
  </ul>
  <ul class="syn-link-list syn-link-list--medium syn-link-list--horizontal">
    <li>
      <a href="javascript:void()" class="syn-link syn-link--medium">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--medium">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--medium">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--medium">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
  </ul>
  <ul class="syn-link-list syn-link-list--large syn-link-list--horizontal">
    <li>
      <a href="javascript:void()" class="syn-link syn-link--large">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--large">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--large">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
    <li>
      <a href="javascript:void()" class="syn-link syn-link--large">
        <syn-icon name="keyboard_arrow_right"></syn-icon>
        Link
      </a>
    </li>
  </ul>
</div>
```
