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

Zeichen und Schriften Listen

Verwendung

Welche Art von Aufzählungszeichen verwendet wird, hängt von den jeweiligen Umständen ab. Bei einfachen Aufzählungen wird ein vollflächiger Kreis verwendet. Bei einer Auflistung von mehreren Optionen/Varianten kann eine nummerierte Aufzählung sinnvoll sein. Zur Hervorhebung von Vorteilen wird eine Aufzählungszeichen in Form eines Häkchens verwendet und für Linklisten ein blaues Dreieck.

Hinweis

Die Linkliste sollte nicht als Navigationselement verwendet werden. Hierfür sollte primär die Kachelnavigation zum Einsatz kommen.

Vorschau

HTML

                
                  <div class="cms_content">
  <h2>Ungeordnete Liste</h2>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Dolor Sit</li>
    <li>Amet Cum</li>
    <li>Nobis Eleifend</li>
  </ul>

  <br/>

  <h2>Vorteile</h2>
  <ul class="check_list">
    <li>Lorem Ipsum</li>
    <li>Dolor Sit</li>
    <li>Amet Cum</li>
    <li>Nobis Eleifend</li>
  </ul>

  <br/>

  <h2>Linkliste</h2>
  <ul class="link_list">
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Dolor Sit</a></li>
    <li><a href="#">Amet Cum</a></li>
    <li><a href="#">Nobis Eleifend</a></li>
  </ul>

  <br/>

  <h2>Geordnete Liste</h2>
  <ol>
    <li>Lorem Ipsum</li>
    <li>Dolor Sit</li>
    <li>Amet Cum</li>
    <li>Nobis Eleifend</li>
  </ol>
</div>

CSS

              @charset "UTF-8";
.cms_content ul,
.cms_content ol {
  margin: 9px 0;
  margin: 0.5625rem 0;
}
.cms_content ul:first-child,
.cms_content ol:first-child {
  margin-top: 0;
}
.cms_content ul:last-child,
.cms_content ol:last-child {
  margin-bottom: 0;
}
.cms_content ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 17px;
}
.cms_content ul li {
  margin-bottom: 5px;
}
.cms_content ul li:last-child {
  margin-bottom: 0;
}
.cms_content ul.check_list, .cms_content ul.star_list {
  list-style: none;
  padding-left: 0;
}
.cms_content ul.check_list li, .cms_content ul.star_list li {
  position: relative;
  padding-left: 25px;
}
.cms_content ul.check_list li:before, .cms_content ul.star_list li:before {
  color: #0069b4;
  position: absolute;
  left: 0;
  top: 0;
}
.cms_content ul.check_list li:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.cms_content ul.check_list li:before {
  font-size: 11px;
  top: 7px;
}
@media screen and (max-width: 767px) {
  .cms_content ul.check_list li:before {
    top: 5px;
  }
}
.cms_content ul.star_list li {
  margin-bottom: 15px;
}
.cms_content ul.star_list li:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.cms_content ul.star_list li:before {
  color: #b3b3b3;
  font-size: 16px;
  top: 3px;
}
@media screen and (max-width: 767px) {
  .cms_content ul.star_list li:before {
    top: 1px;
  }
}
.cms_content ul.link_list {
  list-style-type: none;
  padding-left: 0;
}
.cms_content ul.link_list li {
  margin-bottom: 0;
}
.cms_content ul.link_list li:last-child a {
  border-bottom: none;
}
.cms_content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 17px;
  /* ie only css hack */
}
@media screen and (min-width: 0\0) {
  .cms_content ol {
    padding-left: 22px;
  }
}
.cms_content ol li {
  margin-bottom: 5px;
}
.cms_content ol li:last-child {
  margin-bottom: 0;
}

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, .cms_content ul.link_list li a {
  font-family: 'CorpidCd_TT7', Arial;
  font-weight: normal;
  font-style: normal;
}
.caret_link:before, .cms_content ul.link_list li a: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";

.cms_content {
  ul,
  ol {
    @include rem-margin-top-bottom(9);
    &:first-child {
      margin-top:0;
    }
    &:last-child {
      margin-bottom:0;
    }
  }

  ul {
    list-style-type:disc;
    list-style-position:outside;
    padding-left:17px;

    li {
      margin-bottom:5px;

      &:last-child {
        margin-bottom:0;
      }
    }

    &.check_list,
    &.star_list {
      list-style:none;
      padding-left:0;

      li {
        position:relative;
        padding-left:25px;

        &:before {
          color:$blue;
          position:absolute;
          left:0;
          top:0;
        }
      }
    }

    &.check_list {
      li {
        @include schoeck-icon($icon-check);

        &:before {
          font-size:11px;
          top:7px;

          @media screen and (max-width:$screen-xs-max) {
            top:5px;
          }
        }
      }
    }

    &.star_list {
      li {
        @include schoeck-icon($icon-star);
        margin-bottom:15px;

        &:before {
          color:$grey;
          font-size:16px;
          top:3px;

          @media screen and (max-width:$screen-xs-max) {
            top:1px;
          }
        }
      }
    }

    &.link_list {
      list-style-type:none;
      padding-left:0;

      li {
        margin-bottom:0;

        a {
          @extend .caret_link;
        }

        &:last-child {
          a {
            border-bottom:none;
          }
        }
      }
    }
  }

  ol {
    list-style-type:decimal;
    list-style-position:outside;
    padding-left:17px;

    /* ie only css hack */
    @media screen and (min-width:0\0) {
      padding-left:22px;
    }

    li {
      margin-bottom:5px;
 
      &:last-child {
        margin-bottom:0;
      }
    }
  }
}

@import "../links/_code";