hkk Frontend 2017

Listen-Element: 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-494e" 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-8947" 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-b4ba" 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-f3b5" 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-e0af" 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-7cfd" 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-c055" 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}
 
{
  "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.