# Links
# Primary Link
.c-link
hide code
<a href="" class="c-link">I'm a default c-link</a># Default Link without Class
hide code
<a href="#">I'm a default link</a>
<div class="content m-t-m">
<a href="#">I'm a default link within the page .content</a>
</div># Link Modifiers
.c-link[.-secondary, .-white, .-tiny, .-large, .-underline]
hide 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]]
hide 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
Add Arrow Icons per Class:
..c-link[.-icon-right, .-icon-arrow]
I have an arrow icon on the left
I have an arrow icon on the right
hide 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
TIP
Add a Font Awesome inline icon before or after to the button text.
I have an inline icon on the left
hide code
<a href="#" class="c-link -icon-right">
I have an inline icon on the right
<span class="fa fa-star"></span>
</a><br/>
<a href="#" class="c-link -icon-left">
<span class="fa fa-user"></span>
I have an inline icon on the left
</a>
# Download Link
.c-link.-download
hide 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
hide 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>
# Specials
# Edit Button
.-edit-button
hide code
<a class="c-link -icon-right -edit-button h-pos-relative" title="Persönliche Daten ändern">
<i class="fas fa-edit"></i>
</a>
# Remove Line Link
.-remove-link
hide code
<a class="c-link -remove-link" title="remove line">
<i class="fal fa-2x fa-times"></i>
</a>