hkk Frontend 2017

Link-Liste 

<div class="link-list">
    <header class="link-list__header">
        <h2 class="headline headline--headline-2">Versicherung &amp; Tarife
        </h2>
    </header>
    <div class="link-list__container">
        <div class="link-list__column">
            <h3 class="headline headline--headline-3">Versicherung für...
            </h3>
            <ul class="link-list__list">
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-45f2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Arbeitnehmer</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-f0f9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Auszubildende</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-ef7a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Beamte &amp; Pensionäre</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-3258" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Familien</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-0727" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Freiwillig Versicherte</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-301e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Rentner</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-7f27" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Selbstständige</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-c3c5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Studierende &amp; Praktikanten</span></a>
                </li>
            </ul>
        </div>
        <div class="link-list__column">
            <h3 class="headline headline--headline-3">Allgemeine Infos
            </h3>
            <ul class="link-list__list">
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-1057" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Beiträge</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-1991" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Familienversicherung</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-0899" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Pflegeversicherung</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-5882" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Krankentagegeldversicherung</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-d0f9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Gesundheitskarte</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-580d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Unfall-Fragen &amp; Antworten</span></a>
                </li>
            </ul>
        </div>
        <div class="link-list__column">
            <h3 class="headline headline--headline-3">Zusatzversicherungen hkk privat
            </h3>
            <ul class="link-list__list">
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-6b2a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Auslandsreise</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-b619" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Krankenhaus</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-330a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Krankenhaustagegeld</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-27b4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Krankentagegeld</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-89f9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Pflege-Zusatzversicherung</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-2311" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Pflege-Zusatztagegeld</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-739a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Zahn-Zusatzschutz</span></a>
                </li>
                <li class="link-list__list-item">
                    <a class="link-list__link" href="#">
                        <svg class="icon icon--arrow-right" id="icon-2d9b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg><span class="link-list__link-text">Zahn-Zusatzschutz für Kinder</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render slider
.link-list&attributes(attr)
  //- Header
  header.link-list__header
    //- Title
    if title
      != include('@headline--headline-2', {text: title, level: 2})
  
  .link-list__container
    //- Columns
    if columns
      each column in columns
        .link-list__column
          if column.title
            != include('@headline--headline-3', {text: column.title, level: 3})
          
          if column.links
            ul.link-list__list
              each link in column.links
                li.link-list__list-item
                  a.link-list__link(href=link.url)
                    != include('@icon', {icon: 'arrow-right'})
                    span.link-list__link-text #{link.title}
 
{
  "title": "Versicherung & Tarife",
  "columns": [
    {
      "title": "Versicherung für...",
      "links": [
        {
          "title": "Arbeitnehmer",
          "url": "#"
        },
        {
          "title": "Auszubildende",
          "url": "#"
        },
        {
          "title": "Beamte & Pensionäre",
          "url": "#"
        },
        {
          "title": "Familien",
          "url": "#"
        },
        {
          "title": "Freiwillig Versicherte",
          "url": "#"
        },
        {
          "title": "Rentner",
          "url": "#"
        },
        {
          "title": "Selbstständige",
          "url": "#"
        },
        {
          "title": "Studierende & Praktikanten",
          "url": "#"
        }
      ]
    },
    {
      "title": "Allgemeine Infos",
      "links": [
        {
          "title": "Beiträge",
          "url": "#"
        },
        {
          "title": "Familienversicherung",
          "url": "#"
        },
        {
          "title": "Pflegeversicherung",
          "url": "#"
        },
        {
          "title": "Krankentagegeldversicherung",
          "url": "#"
        },
        {
          "title": "Gesundheitskarte",
          "url": "#"
        },
        {
          "title": "Unfall-Fragen & Antworten",
          "url": "#"
        }
      ]
    },
    {
      "title": "Zusatzversicherungen hkk privat",
      "links": [
        {
          "title": "Auslandsreise",
          "url": "#"
        },
        {
          "title": "Krankenhaus",
          "url": "#"
        },
        {
          "title": "Krankenhaustagegeld",
          "url": "#"
        },
        {
          "title": "Krankentagegeld",
          "url": "#"
        },
        {
          "title": "Pflege-Zusatzversicherung",
          "url": "#"
        },
        {
          "title": "Pflege-Zusatztagegeld",
          "url": "#"
        },
        {
          "title": "Zahn-Zusatzschutz",
          "url": "#"
        },
        {
          "title": "Zahn-Zusatzschutz für Kinder",
          "url": "#"
        }
      ]
    }
  ]
}
  • Content: 
    $link-list-breakpoint: 900px;

.link-list {
  @include mq($until: $link-list-breakpoint) {
    .grid__column & {
      margin-bottom: 3rem;
    }

    .grid__column:last-child & {
      margin-bottom: -2rem;
    }
  }
}

.link-list__header {
  border-bottom: 0.5rem solid $color-steelgrey;
  margin-bottom: 2.5rem;

  .headline {
    margin-bottom: 1rem;
  }
}

.link-list__container {
  @include mq($from: $link-list-breakpoint) {
    display: flex;
  }
}

.link-list__column {
  margin-bottom: 2rem;

  @include mq($from: $link-list-breakpoint) {
    width: 33.33%;

    .grid__column & {
      width: 100%;
    }
  }
}

.link-list__list {
  @include list-reset();
}

.link-list__link {
  color: $color-blue;
  font-size: 1.3rem;

  @include mq($from: $link-list-breakpoint) {
    font-size: 1.5rem;
  }
}

.link-list__link-text {
  margin-left: 5px;
}
  • URL: /components/raw/link-list/link-list.scss
  • Filesystem Path: src/components/organisms/link-list/link-list.scss
  • Size: 855 Bytes

There are no notes for this item.