<div>
<section class="demo">
<p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
<p><a class="link-teaser" href="#">Mehr erfahren</a>
</p>
<p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a>
</p>
</section>
<section class="demo demo--inverted">
<p><a class="link-teaser inverted-text-color" href="#">Mehr erfahren</a>
</p>
<p><a class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</a>
</p>
</section>
</div>
<div>
<section class="demo">
<p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
<p><a class="link-teaser" href="#">Mehr erfahren</a></p>
<p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a></p>
</section>
<section class="demo demo--inverted">
<p><a class="link-teaser inverted-text-color" href="#">Mehr erfahren</a></p>
<p><a class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</a></p>
</section>
</div>
/* No context defined for this component. */
//
// Default Link - used on all class-less link elements
//
// Use relative units for inline links to cover different font faces and sizes.
$underline-offset: -.1em;
$underline-width: $underline-offset - .05em;
$hover-padding: .125em;
$link-padding: .2em;
// sass-lint:disable force-pseudo-nesting
.link-default,
a:not([class]) {
transition: standard-transition(padding-bottom, padding-top, background-color);
box-shadow: inset 0 $underline-offset 0 $brand-white, inset 0 $underline-width 0 $link-color;
padding-bottom: $link-padding;
text-decoration: none;
color: $link-color;
&:focus,
&:hover {
outline: none;
background-color: $link-hover-color-light;
padding-top: $hover-padding;
padding-bottom: $hover-padding;
}
&[href^='mailto'] {
hyphens: none;
}
}
.link--muted {
@extend %heading-font-bold;
@extend %link-unstyled;
color: $brand-muted;
font-size: $link-teaser-font-size;
}
.link-teaser {
@extend %heading-font-heavy;
@extend %link-unstyled;
border-bottom: 3px solid $link-teaser-border-color;
padding-bottom: 2px;
line-height: $link-teaser-line-height;
color: $link-teaser-text-color;
font-size: $link-teaser-font-size;
&.inverted-text-color {
border-bottom: 3px solid $link-teaser-inverted-text-border-color;
color: $link-teaser-inverted-text-text-color;
}
&.inverted-interaction-color {
border-bottom: 3px solid $link-teaser-inverted-interaction-border-color;
color: $link-teaser-inverted-interaction-text-color;
}
}
There are no notes for this item.