Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Kontaktbox

Verwendung

Zum Promoten eines oder mehrerer themenbezogener Ansprechpartner.

Vorschau

HTML

                
                  <div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="contact_element">
        <div class="item_box contact_box">
          <div class="image">
            <img height="432" width="768" src="/img/dummy/768x432.png">
          </div>
          <div class="content">
            <p>Wolfgang Ackenheil</p>
            <p>Pressesprecher</p>
            <p>Telefon: 07223 967-471</p>
            <p>Telefax: 07223 967-7471</p>
            <p>
              E-Mail:
              <a href="mailto:wolfgang.ackenheil@schoeck.de">
                wolfgang.ackenheil@schoeck.de </a>
            </p>
          </div>
          <div class="vcardlink_wrapper">
            <a class="btn-icon-vcard" href="/upload/5-wolfgang-ackenheil.vcf" title="VCard">VCard</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="contact_element">
        <div class="item_box contact_box">
          <div class="image">
            <img height="432" width="768" src="/img/dummy/768x432.png">
          </div>
          <h3 class="header">Lorem Ipsum Dolor Sit Amet</h3>
          <div class="content">
            <p>Wolfgang Ackenheil</p>
            <p>Pressesprecher</p>
            <p>Telefon: 07223 967-471</p>
            <p>Telefax: 07223 967-7471</p>
            <p>
              E-Mail:
              <a href="mailto:wolfgang.ackenheil@schoeck.de">
                wolfgang.ackenheil@schoeck.de </a>
            </p>
          </div>
          <div class="vcardlink_wrapper">
            <a class="btn-icon-vcard" href="/upload/5-wolfgang-ackenheil.vcf" title="VCard">VCard</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

              @charset "UTF-8";
.contact_element {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_element {
    margin-bottom: 25px;
  }
}
.contact_element .contact_box {
  max-width: 300px;
  min-width: 250px;
  display: inline-block;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .contact_element .contact_box {
    padding-bottom: 20px;
  }
}
.contact_element .contact_box .image {
  margin-bottom: 20px;
}
.contact_element .contact_box .image img {
  width: 100%;
  height: auto;
}
.contact_element .contact_box .image svg {
  width: 100%;
  height: auto;
}
.contact_element .contact_box .image svg.av_svg_icon {
  width: 50%;
  height: auto;
}
.contact_element .contact_box .image svg.av_svg_icon * {
  fill: #0069b4;
}
.contact_element .contact_box .image svg.av_svg_icon *[stroke] {
  stroke: #0069b4;
}
.contact_element .contact_box .header {
  text-align: center;
  margin-bottom: 18px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 25px;
  line-height: 1.5625rem;
}
.contact_element .contact_box .content {
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 18px;
  line-height: 1.125rem;
}
.contact_element .contact_box .content p {
  margin-bottom: 5px;
}
.contact_element .contact_box .phonelink_wrapper {
  margin-bottom: 15px;
  text-align: center;
}
.contact_element .contact_box .vcardlink_wrapper {
  text-align: center;
}
.contact_element .contact_box .vcardlink_wrapper .btn-icon-vcard {
  margin-top: 30px;
  display: inline-block;
}
.contact_element .contact_box .link_wrapper {
  text-align: center;
}
.contact_element .contact_box .description_wrapper {
  margin-top: 30px;
}
.contact_element .contact_box .ce_content_wrapper {
  margin-top: 30px;
}

.item_box {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  border: solid 1px #e6e6e6;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .item_box {
    padding: 15px;
  }
}

/* buttons */
.btn {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-size: .9375rem;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-bottom: 0;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  top: 0;
  transition: .2s top ease;
  vertical-align: middle;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
}
.btn:active {
  background-image: none;
  box-shadow: none;
  top: 1px;
}

.btn-primary {
  background-color: #0069b4;
  border-color: #005a9b;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #004b81;
  border-color: #00365d;
  color: #fff;
}
.btn-primary:active {
  background-image: none;
}

.btn-primary {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
  border: none;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.3);
  transition: .2s top ease, .2s box-shadow ease;
}
.btn-primary:active {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
}

.btn-light {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  color: #0069b4;
  padding: 11px 20px;
  transition: .2s color ease, .2s top ease, .2s box-shadow ease;
}
.btn-light:hover {
  color: #f9b200;
}
.btn-light:focus {
  color: #0069b4;
}
.btn-light:focus:hover {
  color: #f9b200;
}

@media screen and (max-width: 767px) {
  .btn-light {
    transition: .2s top ease, .2s box-shadow ease;
  }
}
[class^="btn-icon-"], [class*=" btn-icon-"] {
  padding-left: 50px;
  position: relative;
  /* styling for light button */
}
[class^="btn-icon-"]:before, [class*=" btn-icon-"]:before {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 17px;
  line-height: 1.0625rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
}
[class^="btn-icon-"].btn-light:before, [class*=" btn-icon-"].btn-light:before {
  color: #0069b4;
  transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
  [class^="btn-icon-"].btn-light:before, [class*=" btn-icon-"].btn-light:before {
    transition: none;
  }
}
[class^="btn-icon-"].btn-light:hover:before, [class^="btn-icon-"].btn-light:focus:before, [class^="btn-icon-"].btn-light.focus:before, [class*=" btn-icon-"].btn-light:hover:before, [class*=" btn-icon-"].btn-light:focus:before, [class*=" btn-icon-"].btn-light.focus:before {
  color: #f9b200;
}

.btn-icon-vcard {
  padding-left: 30px;
}
.btn-icon-vcard:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.btn-icon-vcard:before {
  left: 0;
}
@media screen and (max-width: 767px) {
  .btn-icon-vcard {
    display: none;
  }
}

SCSS

              @import "../general/_general";

.contact_element {
  text-align:center;

  @media screen and (max-width:$screen-xs-max) {
    margin-bottom:25px;
  }

  .contact_box {
    max-width:300px;
    min-width:250px;
    display:inline-block;
    padding-bottom:40px;

    @media screen and (max-width:767px) {
      padding-bottom:20px;
    }

    .image {
      margin-bottom:20px;

      img {
        width:100%;
        height:auto;
      }

      svg {
        width:100%;
        height:auto;

        &.av_svg_icon {
          width:50%;
          height:auto;

          * {
            fill:$blue;

            &[stroke] {
              stroke:$blue;
            }
          }
        }
      }
    }

    .header {
      text-align:center;
      margin-bottom:18px;
      @include rem-font-size(20);
      @include rem-line-height(25);
    }

    .content {
      text-align:center;
      @include rem-font-size(14);
      @include rem-line-height(18);

      p {
        margin-bottom:5px;
      }
    }

    .phonelink_wrapper {
      margin-bottom:15px;
      text-align:center;
    }

    .vcardlink_wrapper {
      text-align:center;

      .btn-icon-vcard {
        margin-top:30px;
        display:inline-block;
      }
    }

    .link_wrapper {
      text-align:center;
    }

    .description_wrapper {
      margin-top:30px;
    }

    .ce_content_wrapper {
      margin-top:30px;
    }
  }
}

.item_box {
  @include border-radius(6px);
  background-color:#fff;
  @include box-shadow(0 2px rgba(0, 0, 0, .05));
  border:solid 1px $lightgrey;
  padding:20px;

  @media screen and (max-width:767px) {
    padding:15px;
  }
}

/* buttons */
@import "../buttons/_code";

[class^="btn-icon-"], [class*=" btn-icon-"] {
  padding-left:50px;
  position:relative;

  &:before {
    @include rem-font-size(15);
    @include rem-line-height(17);
    @include autocenterY();
    left:20px;
  }

  /* styling for light button */
  &.btn-light {
    &:before {
      color:$blue;
      @include linkcolor-transition;
    }
    &:hover,
    &:focus,
    &.focus {
      &:before {
        color:$orange;
      }
    }
  }
}

.btn-icon-vcard {
  @include schoeck-icon($icon-vcard);
  padding-left:30px;

  &:before {
    left:0;
  }

  @media screen and (max-width:767px) {
    display:none;
  }
}