hkk Frontend 2017

Contacts: Default 

<section class="contacts">
    <div class="contacts__inner">
        <div class="contacts__headline">
            <h3 class="headline headline--display-2">Sie haben noch Fragen?
            </h3>
        </div>
        <div class="contacts__items">
            <div class="contacts__item">
                <div class="contacts__teaser">
                    <div class="contacts__teaser-image">
                        <div class="image-wrap"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-contact-01.png" />
                            <button class="copyright js-tooltip image__copyright" title="lorem" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-fb8b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </div>
                    <div class="contacts__teaser-content">
                        <div class="contacts__teaser-name">Sophia Miller</div>
                        <div class="contacts__teaser-role">Recruiting</div>
                        <div class="contacts__teaser-tel"><a class="contacts__teaser-tel-link" href="tel:0421 3655-3184">Tel.: 0421 3655-3184</a></div>
                        <div class="contacts__teaser-mail"><a class="contacts__teaser-mail-link" href="mailto:sophia.miller(at)hkk.de">E-Mail: sophia.miller(at)hkk.de</a></div>
                    </div>
                </div>
            </div>
            <div class="contacts__item">
                <div class="contacts__teaser">
                    <div class="contacts__teaser-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-contact-02.png" />
                    </div>
                    <div class="contacts__teaser-content">
                        <div class="contacts__teaser-name">Tom Schuchert</div>
                        <div class="contacts__teaser-role">Recruiting</div>
                        <div class="contacts__teaser-tel"><a class="contacts__teaser-tel-link" href="tel:00421 3655-3192">Tel.: 00421 3655-3192</a></div>
                        <div class="contacts__teaser-mail"><a class="contacts__teaser-mail-link" href="mailto:tom.schuchert@hkk.de">E-Mail: tom.schuchert@hkk.de</a></div>
                    </div>
                </div>
            </div>
            <div class="contacts__item">
                <div class="contacts__teaser">
                    <div class="contacts__teaser-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-contact-02.png" />
                    </div>
                    <div class="contacts__teaser-content">
                        <div class="contacts__teaser-name">Tom Schuchert</div>
                        <div class="contacts__teaser-role">Recruiting</div>
                        <div class="contacts__teaser-tel"><a class="contacts__teaser-tel-link" href="tel:00421 3655-3192">Tel.: 00421 3655-3192</a></div>
                        <div class="contacts__teaser-mail"><a class="contacts__teaser-mail-link" href="mailto:tom.schuchert@hkk.de">E-Mail: tom.schuchert@hkk.de</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Tag
  tag = tag ? tag : 'section';

//- Render Contacts
#{tag}.contacts&attributes(attr): .contacts__inner
  if headline 
    .contacts__headline 
      != include('@headline--display-2', {text: headline, level: 3})
  
  .contacts__items(class=single ? "contacts__items--one" : "")
    if items
      each item in items
        .contacts__item
          .contacts__teaser
            if item.image
              .contacts__teaser-image
                != include('@image', {image: item.image, copyright: item.copyright})
            
              .contacts__teaser-content
                if item.name
                  .contacts__teaser-name #{item.name}

                if item.name
                  .contacts__teaser-role #{item.role}
                
                if item.tel
                  .contacts__teaser-tel
                    a.contacts__teaser-tel-link(href=`tel:${item.tel}`) Tel.: #{item.tel}

                if item.mail
                  .contacts__teaser-mail
                    a.contacts__teaser-mail-link(href=`mailto:${item.mail}`) E-Mail: #{item.mail}
 
{
  "headline": "Sie haben noch Fragen?",
  "items": [
    {
      "image": "/images/dummy/dummy-contact-01.png",
      "copyright": "lorem",
      "name": "Sophia Miller",
      "role": "Recruiting",
      "tel": "0421 3655-3184",
      "mail": "sophia.miller(at)hkk.de"
    },
    {
      "image": "/images/dummy/dummy-contact-02.png",
      "name": "Tom Schuchert",
      "role": "Recruiting",
      "tel": "00421 3655-3192",
      "mail": "tom.schuchert@hkk.de"
    },
    {
      "image": "/images/dummy/dummy-contact-02.png",
      "name": "Tom Schuchert",
      "role": "Recruiting",
      "tel": "00421 3655-3192",
      "mail": "tom.schuchert@hkk.de"
    }
  ]
}
  • Content: 
    .contacts {
  padding-top: 4rem;

  @include mq($from: l) {
    padding-bottom: 1rem;
    padding-top: 5rem;
  }
}

.contacts__inner {
  position: relative;
  width: 100%;

  @include make-container();
  
  @include mq($from: l) {
    max-width: 97rem;
  }

  @include mq($until: m) {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

.contacts__items {
  display: flex;
  flex-wrap: wrap;

  @include mq($from: m) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

.contacts__headline {
  margin-bottom: 3.5rem;

  @include mq($from: m) { 
    margin-bottom: 5rem;
  }
}

.contacts__item {
  margin-bottom: 4rem;
  width: 100%;

  .contacts__items--one & {
    flex-basis: 100%;
    max-width: 100%;
  }

  &:last-child {
    @include mq($until: m) { 
      margin-bottom: 0;
    }
  }

  @include mq($from: m) { 
    flex-basis: 50%;
    margin-bottom: 3rem;
    max-width: 50%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  @include mq($from: l) { 
    flex-basis: 33.33%;
    max-width: 33.33%;
  }
}

.contacts__teaser {
  display: flex;

  @include mq($from: m) {
    flex-direction: column;
  }
}

.contacts__teaser-image {
  margin-right: 1rem;
  width: 9.7rem;

  @include mq($from: m) { 
    margin-bottom: 1rem;
    margin-right: 0;
    width: 13rem;
  }
}

.contacts__teaser-content {
  color: $color-blue;
  width: calc(100% - 10.7rem);
  
  @include mq($from: m) { 
    width: 100%;
  }

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

.contacts__teaser-name {
  font-weight: 700;
}

.contacts__teaser-role {
  margin-bottom: 2rem;
}

.contacts__teaser-tel {
  margin-top: 2rem;
  position: relative;
  
  @include mq($from: m) { 
    margin-top: 3rem;
  }

  &::before {
    background-color: $color-red;
    border-radius: 2px;
    content: '';
    height: 2px;
    left: 0;
    max-width: 9.5rem;
    min-width: 9.5rem;
    position: absolute;
    top: -1rem;

    @include mq($from: m) { 
      top: -1.5rem;
    }
  }
}

.contacts__teaser-tel-link,
.contacts__teaser-mail-link {
  &:hover {
    color: $color-blue-light;
  }
}

.contacts__items--one {
  .contacts__teaser {
    @include mq($from: m) {
      align-items: flex-end;
      flex-direction: row;
    }
  }

  .contacts__teaser-image {
    @include mq($from: m) {
      margin-bottom: 0;
      margin-right: 2rem;
    }

    @include mq($from: l) {
      margin-right: 5rem;
      width: 15rem;
    }
  }

  .contacts__teaser-content {
    @include mq($from: m) {
      width: calc(100% - 15rem);
    }

    @include mq($from: l) {
      width: calc(100% - 23rem);
    }
  }
}

.detail-page {
  .contacts {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    @include mq($from: page-max) {
      margin-left: calc(50% - #{$page-max-width} / 2);
      margin-right: calc(50% - #{$page-max-width} / 2);
    }
  }
}

.overview-page__container {
  .contacts__inner {
    @include mq($from: m) {
      padding-left: 0;
      padding-right: 0;
    }

    @include mq($until: m) {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }
}
  • URL: /components/raw/contacts/contacts.scss
  • Filesystem Path: src/components/organisms/contacts/contacts.scss
  • Size: 3.1 KB

There are no notes for this item.