Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Contact 

<div class=" contact ">
    <p class="h4 contact__title">REHAU AG + CO | Kontakt</p>
    <div class="contact__list">
        <div class="contact__address address ">
            <p class="address__info">
                <a class="address__link" href="">Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE</a>
            </p>

            <p class="address__info">
                <a class="address__link" href="tel:+499283770">+ 49 9283 77-0</a>
            </p>
            <p class="address__info">
                <a class="address__link" href="mailto:info@rehau.com?subject=feedback">info@rehau.com</a>
            </p>
        </div>

        <div class="contact__address address ">
            <p class="address__info">
                <a class="address__link" href="">Eltersdorf<br>Ytterbium 4<br>91058 Erlangen | DE</a>
            </p>

            <p class="address__info">
                <a class="address__link" href="tel:+4991319250">+ 49 9131 92-50</a>
            </p>
            <p class="address__info">
                <a class="address__link" href="mailto:erlangen@rehau.com?subject=feedback">erlangen@rehau.com</a>
            </p>
        </div>

    </div>
</div>
 
<div class="{{mixes}} contact {{modifiers}}">
  <p class="h4 contact__title">{{{contact}}}</p>
  <div class="contact__list">
    {{#each addresses}}
      {{render '@atoms-address' this}}
    {{/each}}
  </div>
</div>
 
{
  "contact": "REHAU AG + CO | Kontakt",
  "addresses": [
    {
      "address": "Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE",
      "mixes": "contact__address",
      "links": [
        {
          "href": "tel:+499283770",
          "text": "+ 49 9283 77-0"
        },
        {
          "href": "mailto:info@rehau.com?subject=feedback",
          "text": "info@rehau.com"
        }
      ]
    },
    {
      "address": "Eltersdorf<br>Ytterbium 4<br>91058 Erlangen | DE",
      "mixes": "contact__address",
      "links": [
        {
          "href": "tel:+4991319250",
          "text": "+ 49 9131 92-50"
        },
        {
          "href": "mailto:erlangen@rehau.com?subject=feedback",
          "text": "erlangen@rehau.com"
        }
      ]
    }
  ]
}
  • Content: 
    $contact-margin-y: 1.2 * $base-margin;
$contact-margin-x: 2 * $base-margin;

.contact {
  &__title {
    margin-bottom: $contact-margin-x;
  }

  &__list {
    display: flex;
    flex-flow: row wrap;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        margin: -$gutter / 2;
      }
    }
  }

  &__address {
    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        margin: $gutter / 2;

        &:not(:last-child) {
          margin-right: $gutter * 1.5;
        }
      }
    }
  }
}
  • URL: /components/raw/molecules-contact/_contact.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/90-contact/_contact.scss
  • Size: 647 Bytes

There are no notes for this item.