# Links

{% code title="Default Link" %}
```html
<a class="link" title="Link S" href="#">Default Link</a>
```
{% endcode %}

## Sizes

{% tabs %}
{% tab title="Small" %}
```html
<a class="link text-s" title="Link S" href="#">Link S</a>
```
{% endtab %}

{% tab title="Medium" %}
```html
<a class="link text-m" title="Link M" href="#">Link M</a>
```
{% endtab %}

{% tab title="Large" %}
```html
<a class="link text-l" title="Link L" href="#">Link L</a>
```
{% endtab %}
{% endtabs %}

{% embed url="https://codepen.io/neptunecss/pen/qBJJvbB" %}
Link sizes example
{% endembed %}

## Styles

{% tabs %}
{% tab title="Default" %}
```html
<a class="link text-l" href="#" title="Link default">Default</a>
```
{% endtab %}

{% tab title="Accent" %}
```html
<a class="link text-l link-accent" href="#" title="Link accent">Accent</a>
```
{% endtab %}

{% tab title="Information" %}
```html
<a class="link text-l link-info" href="#" title="Link information">Information</a>
```
{% endtab %}

{% tab title="Success" %}
```html
<a class="link text-l link-success" href="#" title="Link success">Success</a>
```
{% endtab %}

{% tab title="Warning" %}
```html
<a class="link text-l link-warning" href="#" title="Link warning">Warning</a>
```
{% endtab %}

{% tab title="Error" %}
```html
<a class="link text-l link-error" href="#" title="Link error">Error</a>
```
{% endtab %}
{% endtabs %}

{% embed url="https://codepen.io/neptunecss/pen/Baqqbjd?editors=1100" %}
Link styles example
{% endembed %}



