Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Navigationselemente Links

Links haben immer dieselbe Schriftgröße und Farbe. Zudem sollten Links nicht fett formatiert werden und keine Überschriften verlinkt werden um das Indentifizieren von Links nicht zu erschweren.

Verwendung

Verlinkung von einzelnen Begriffen im Fließtext: immer ohne Formatierung

Links in eigener Zeile oder nach einem Absatz: immer mit Pfeil-Formatierung

Hinweis

Links auf externe Seiten sollten sich in einem neuen Fenster öffnen [target="_blank"], interne Verlinkungen im selben Fenster [target="_self"].

Überschriften dürfen nicht verlinkt werden, um das Identifizieren von Links nicht zu erschweren.

Vorschau

HTML

                
                  <div>
  <p>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper <a href="#" target="_self">Link</a> nisl ut aliquip ex ea commodo consequat.
  </p>
</div>
<div>
  <a href="#" target="_self" class="caret_link">Link mit Icon</a>
</div>

CSS

              a {
  color: #0069b4;
  font-family: 'Corpid_TT7_Bold', Arial;
  font-weight: normal;
  font-style: normal;
  transition: color 0.2s ease;
}
@media screen and (max-width: 767px) {
  a {
    transition: none;
  }
}
a:hover {
  color: #f9b200;
}

.caret_link {
  font-family: 'CorpidCd_TT7', Arial;
  font-weight: normal;
  font-style: normal;
}
.caret_link:before {
  border-bottom: 4px solid transparent;
  border-left: 4px solid;
  border-right: 4px solid transparent;
  border-top: 4px solid transparent;
  content: '';
  display: inline-block;
  height: 0;
  margin-left: 0;
  margin-right: 5px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 0;
}

SCSS

              @import "../general/_general";

a {
  color:$blue;
  @include corpid-bold;
  transition:color 0.2s ease;

  @media screen and (max-width:767px) {
    transition:none;
  }

  &:hover {
    color:$orange;
  }
}

.caret_link {
  @include corpid-cd-bold;

  &:before {
    border-bottom:4px solid transparent;
    border-left:4px solid;
    border-right:4px solid transparent;
    border-top:4px solid transparent;
    content:'';
    display:inline-block;
    height:0;
    margin-left:0;
    margin-right:5px;
    position:relative;
    top:-1px;
    vertical-align:middle;
    width:0;
  }
}