<!-- Listen-Element -->
<div class="list-element">
    <header class="list-element__header">
        <div class="list-element__address">
            <h4 class="headline list-element__address-headline headline--headline-1">Rolf Blunk
            </h4><span class="list-element__address-distance">2,5 km</span><span class="list-element__address-location">Gleimstr. 57, 10437 Berlin</span>
            <ul class="list-element__address-contact-list">
                <li class="list-element__address-contact-list-item">Telefon: (030) 4480718</li>
                <li class="list-element__address-contact-list-item">Fax: (030) 44359936</li>
            </ul>
        </div>
        <div class="list-element__links">
            <ul class="icon-list">
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--external-link" id="icon-0c36" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Routenplaner
                    </a>
                </li>
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--external-link" id="icon-dae1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Website
                    </a>
                </li>
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--mail" id="icon-6aeb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>E-Mail
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <div class="list-element__inner">
        <div class="list-element__row"><img class="list-element__logo" src="/images/dummy/dummy-logo.png" />
        </div>
    </div>
</div>

<!-- Listen-Element mit Aufzählung und Text -->
<div class="list-element">
    <header class="list-element__header">
        <div class="list-element__address">
            <h4 class="headline list-element__address-headline headline--headline-1">Rolf Blunk
            </h4><span class="list-element__address-distance">2,5 km</span><span class="list-element__address-location">Gleimstr. 57, 10437 Berlin</span>
            <ul class="list-element__address-contact-list">
                <li class="list-element__address-contact-list-item">Telefon: (030) 4480718</li>
                <li class="list-element__address-contact-list-item">Fax: (030) 44359936</li>
            </ul>
        </div>
        <div class="list-element__links">
            <ul class="icon-list">
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--external-link" id="icon-a649" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Routenplaner
                    </a>
                </li>
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--external-link" id="icon-4fb3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Website
                    </a>
                </li>
                <li class="icon-list__item">
                    <a class="icon-block" href="#">
                        <svg class="icon icon-block__icon icon--mail" id="icon-5ea3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>E-Mail
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <div class="list-element__inner">
        <div class="list-element__row">
            <div class="list-element__title">hkk-Versicherte</div>
            <ul class="list-element__list">
                <li class="list-element__list-item">
                    <svg class="icon list-element__icon icon--checkmark icon--before icon--red" id="icon-319a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>Zahlen bei Abschluss einer Mitgliedschaft über 12 Monate statt monatlich 69,00 Euro nur 46,00 Euro.
                </li>
                <li class="list-element__list-item">
                    <svg class="icon list-element__icon icon--checkmark icon--before icon--red" id="icon-b8df" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>Die Aufnahmegebühr beträgt für hkk-Versicherte statt 79,00 Euro nur 46,00 Euro.
                </li>
            </ul>
        </div>
        <div class="list-element__row">
            <div class="list-element__title">hkk-versicherte-Studenten</div>
            <ul class="list-element__list">
                <li class="list-element__list-item">
                    <svg class="icon list-element__icon icon--checkmark icon--before icon--red" id="icon-1a0c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>Die Vertragslaufzeit muss nur 12 Monate anstatt 18 Monate betragen.
                </li>
                <li class="list-element__list-item">
                    <svg class="icon list-element__icon icon--checkmark icon--before icon--red" id="icon-f099" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>Der monatliche Beitrag beträgt 44,00 Euro. Die Servicegebühr für Studenten beträgt einmalig 44,00 Euro.
                </li>
            </ul>
        </div>
        <div class="list-element__row">Das einmalige ULC Startpaket (Umfang je nach gewählter Betreuungsintensität) und die Quartals-Trainerpauschale sind Teile des ULC Betreuungspaketes und fallen nicht unter die hkk Rabattierung.</div>
    </div>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render slider
.list-element&attributes(attr)
  //- Header
  header.list-element__header
    //- Address
    if address
      .list-element__address
        != include('@headline--headline-1', {attr: {class: 'list-element__address-headline'}, text: address.name, level: 4})
        
        span.list-element__address-distance #{address.distance}
        span.list-element__address-location #{address.location}
        
        ul.list-element__address-contact-list
          each contact in address.contacts
            li.list-element__address-contact-list-item #{contact}

    //- Links
    if links
      .list-element__links
        != include('@icon-list', {items: links})

  //- Content
  .list-element__inner
    //- Logos
    if logos
      .list-element__row
        each logo in logos
          img.list-element__logo(src=logo.src)

    //- List
    if lists
      each list in lists
        .list-element__row
          .list-element__title #{list.title}
      
          ul.list-element__list
            each listItem in list.listItems
              li.list-element__list-item
                != include('@icon--before', {attr: {class: 'list-element__icon'}, text: listItem.text, icon: listItem.icon, color: 'red'})

    //- Text
    if texts
      each text in texts
        .list-element__row #{text}
/* Listen-Element */
{
  "address": {
    "link": "#",
    "name": "Rolf Blunk",
    "distance": "2,5 km",
    "location": "Gleimstr. 57, 10437 Berlin",
    "contacts": [
      "Telefon: (030) 4480718",
      "Fax: (030) 44359936"
    ]
  },
  "links": [
    {
      "text": "Routenplaner",
      "icon": "external-link"
    },
    {
      "text": "Website",
      "icon": "external-link"
    },
    {
      "text": "E-Mail",
      "icon": "mail"
    }
  ],
  "logos": [
    {
      "src": "/images/dummy/dummy-logo.png"
    }
  ]
}

/* Listen-Element mit Aufzählung und Text */
{
  "address": {
    "link": "#",
    "name": "Rolf Blunk",
    "distance": "2,5 km",
    "location": "Gleimstr. 57, 10437 Berlin",
    "contacts": [
      "Telefon: (030) 4480718",
      "Fax: (030) 44359936"
    ]
  },
  "links": [
    {
      "text": "Routenplaner",
      "icon": "external-link"
    },
    {
      "text": "Website",
      "icon": "external-link"
    },
    {
      "text": "E-Mail",
      "icon": "mail"
    }
  ],
  "logos": null,
  "lists": [
    {
      "title": "hkk-Versicherte",
      "listItems": [
        {
          "icon": "checkmark",
          "text": "Zahlen bei Abschluss einer Mitgliedschaft über 12 Monate statt monatlich 69,00 Euro nur 46,00 Euro."
        },
        {
          "icon": "checkmark",
          "text": "Die Aufnahmegebühr beträgt für hkk-Versicherte statt 79,00 Euro nur 46,00 Euro."
        }
      ]
    },
    {
      "title": "hkk-versicherte-Studenten",
      "listItems": [
        {
          "icon": "checkmark",
          "text": "Die Vertragslaufzeit muss nur 12 Monate anstatt 18 Monate betragen."
        },
        {
          "icon": "checkmark",
          "text": "Der monatliche Beitrag beträgt 44,00 Euro. Die Servicegebühr für Studenten beträgt einmalig 44,00 Euro."
        }
      ]
    }
  ],
  "texts": [
    "Das einmalige ULC Startpaket (Umfang je nach gewählter Betreuungsintensität) und die Quartals-Trainerpauschale sind Teile des ULC Betreuungspaketes und fallen nicht unter die hkk Rabattierung."
  ]
}

  • Content:
    .list-element {
      background-color: $color-steelgrey-xlight;
      margin-bottom: 1.5rem;
    
      padding: 2.5rem;
    
      @include mq($from: m) {
        font-size: 1.5rem;
        padding: 4rem 5rem;
      }
    }
    
    .list-element__header {
      border-bottom: 1px solid $color-steelgrey;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    
      @include mq($from: m) {
        padding-bottom: 1rem;
      }
    }
    
    .list-element__address-headline {
      float: left;
      font-size: 1.9rem;
    }
    
    .list-element__address-distance {
      @include clearfix();
    
      line-height: 1.2;
      margin-left: 0.5rem;
    
      &::before {
        content: '\b7';
        margin: 0 0.5rem;
      }
    
      @include mq($from: m) {
        font-size: 1.9rem;
      }
    }
    
    .list-element__address-contact-list {
      @include list-reset();
    
      @include mq($until: m) {
        margin-bottom: 2rem;
      }
    }
    
    .list-element__address-contact-list-item {
      @include mq($from: m) {
        display: inline-block;
    
        &:not(:first-child)::before {
          content: '\b7\a0';
          margin: 0 0.5rem;
        }
      }
    }
    
    .list-element__row {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 2rem 0;
    
      &:not(:last-child) {
        border-bottom: 1px solid $color-steelgrey;
      }
    
      &:last-child {
        padding-bottom: 0;
      }
    }
    
    .list-element__logo {
      filter: grayscale(1);
      margin-right: 3rem;
    }
    
    .list-element__title {
      font-weight: bold;
    
      @include mq($until: m) {
        margin-bottom: 1rem;
      }
    
      @include mq($from: m) {
        width: 33.33%;
      }
    
      @include mq($from: l) {
        width: 25%;
      }
    }
    
    .list-element__list {
      @include list-reset();
    
      padding-left: 2.5rem;
    
      @include mq($from: m) {
        padding-left: 4rem;
        width: 66.66%;
      }
    
      @include mq($from: l) {
        width: 75%;
      }
    }
    
    .list-element__icon {
      height: 1.3rem;
      margin-left: -2.3rem;
      margin-right: 1rem;
      width: 1.3rem;
    }
    
    .list-element__list-item {
      &:not(:last-child) {
        margin-bottom: 1rem;
      }
    }
    
  • URL: /components/raw/list-element/list-element.scss
  • Filesystem Path: src/components/organisms/list-element/list-element.scss
  • Size: 1.9 KB

There are no notes for this item.