<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-f869" 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-45c5" 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-09bb" 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-bf17" 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-ef95" 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-0cf2" 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-c4b1" 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-866c" 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-98d4" 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-bede" 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-1a04" 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-3d42" 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-5c5c" 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-f4fa" 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-9139" 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-6ce8" 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-8016" 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-7de4" 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-7533" 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-515c" 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-184f" 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-1e54" 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.