Links

TIP

Use the <a> element only to create links, do not use it for buttons or other interactive elements! (Buttons are interactive elements, while links are for navigation.)

• Links are also used in a Link List, see Molecules > List > Link-List.

Primary Link

.c-link

I'm a default c-link

<a href="" class="c-link">I'm a default c-link</a>

Default Link without Class

WARNING

This is only a fallback-styling! Do not use the default link without the .c-link class if possible.

I'm a default link

I'm a default link within .content

I'm a default link within .theme-plausi.content

Show Code

<a href="#">I'm a default link</a>
<div class="content m-t-m">
    <a href="#">I'm a default link within .content</a>
</div>
<div class="theme-plausi">
    <div class="content m-t-m">
        <a href="#">I'm a default link within .theme-plausi.content</a>
    </div>
</div>

Link Modifiers

Secondary, White, Tiny, Large, Disabled, Underlined

.c-link[.-secondary, .-white, .-tiny, .-large, .-underline]

I'm a secondary link
A white link
A tiny link
A large link
I'm disabledI'm underlined

Show Code

<div class="h-flex h-space-between">
    <a href="" class="c-link -secondary">I'm a secondary link</a><br/>
    <a href="" class="c-link -white h-bg-color-black p-x-s">A white link</a><br/>
    <a href="" class="c-link -tiny">A tiny link</a><br/>
    <a href="" class="c-link -large">A large link</a><br/>
    <a href="" class="c-link -disabled">I'm disabled</a>
    <a href="" class="c-link -underline">I'm underlined</a>
</div>

Status Link Modifiers

.c-link[.-error, .-success, .-disabled/[disabled]]

I'm a successful linkI'm a warningI'm an error :(I'm disabled

Show Code

<div class="h-flex h-space-between h-width-50">
    <a href="" class="c-link -success">I'm a successful link</a>
    <a href="" class="c-link -warning p-x-m">I'm a warning</a>
    <a href="" class="c-link -error p-x-m">I'm an error :(</a>
    <a href="" class="c-link -disabled">I'm disabled</a>
</div>

Links with Icons

Arrow Icons

.c-link[.-icon-left/.-icon-right, .-icon-arrow]

I have an arrow icon on the left
I have an arrow icon on the right

Show Code

<a href="#" class="c-link -icon-left -icon-arrow">I have an arrow icon on the left</a><br/>
<a href="#" class="c-link -icon-right -icon-arrow">I have an arrow icon on the right</a><br/>

Inline Icons

Add a Font Awesome inline icon before or after to the button text.

WARNING

Icons are only for decoration and should be hidden by adding the attribute aria-hidden="true, see Accessibility Helper Classes.

I have an inline icon on the right
I have an inline icon on the left

Show Code

<a href="#" class="c-link -icon-right">
  I have an inline icon on the right
  <span class="fa fa-star" aria-hidden="true"></span>
</a>
<br/>
<a href="#" class="c-link -icon-left">
  <span class="fa fa-user" aria-hidden="true"></span>
  I have an inline icon on the left
</a>

Download Link

.c-link.-download

Steckbrief-Druck.pdf

Show Code

<a href="#" title="Angehängtes Prüfzertifikat" target="_blank" class="c-link  -download">
  <span id="certificate-name-protocol">Steckbrief-Druck.pdf</span>
</a>

.c-link.-download.-disabled

Steckbrief-Druck.pdf

Show Code

<a href="#" title="Angehängtes Prüfzertifikat" target="_blank" class="c-link  -download -disabled">
  <span id="certificate-name-protocol">Steckbrief-Druck.pdf</span>
</a>

Edit Button

.c-link.-edit-button

Show Code

<a class="c-link -icon-right -edit-button h-pos-relative" title="Persönliche Daten ändern">
  <i class="fas fa-edit" aria-hidden="true"></i>
</a>

Remove Line Link

.c-link.-remove-link

Show Code

<a class="c-link -remove-link" title="remove line">
  <i class="fal fa-2x fa-times" aria-hidden="true"></i>
</a>