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

Footer 

<footer class="footer">
    <div class="footer__main">
        <div class="container">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell medium-4 large-3">
                    <p class="h4 footer__title">Unsere Services</p>

                    <ul class=" list ">
                        <li class="list__item"><a href="#">Materialinformationen</a>
                        </li>
                        <li class="list__item"><a href="#">Liefer-& Zahlungsbedingungen</a>
                        </li>
                        <li class="list__item"><a href="#">Gelangensbestätigung</a>
                        </li>
                        <li class="list__item"><a href="#">Downloads</a>
                        </li>
                        <li class="list__item"><a href="#">Händlersuche</a>
                        </li>
                    </ul>
                </div>
                <div class="cell pre-medium-auto">
                    <div class="footer__contact 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>
                <div class="footer__cell cell large-shrink">
                    <div class="footer__social-media social-media ">

                        <ul class="social-media__list list -social-icons">
                            <li class="list__item"><a href="#"><i class='icon -facebook'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -twitter'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -linkedin'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -google'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -xing'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -youtube'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -instagram'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -pinterest'></i></a>
                            </li>
                        </ul>

                        <ul class="social-media__list list -social-buttons">
                            <li class="list__item"><a href="#"><img src="/images/app-store.png"></a>
                            </li>
                            <li class="list__item"><a href="#"><img src="/images/google-play.png"></a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="footer__nav">
        <div class="container">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell medium-auto">

                    <ul class="footer__list list -horizontal">
                        <li class="list__item"><a href="#">Unternehmen</a>
                        </li>
                        <li class="list__item"><a href="#">Karierre</a>
                        </li>
                        <li class="list__item"><a href="#">Presse</a>
                        </li>
                        <li class="list__item"><a href="#">Downloads</a>
                        </li>
                        <li class="list__item"><a href="#">Unternehmensmagazin</a>
                        </li>
                        <li class="list__item"><a href="#">Impressum</a>
                        </li>
                        <li class="list__item"><a href="#">Datenschutz</a>
                        </li>
                    </ul>
                </div>
                <div class="cell medium-shrink">
                    <div class="footer__country-selector select -country-selector">
                        <select>
                            <option value="Germany">
                                Germany
                            </option>
                            <option value="Lithuania">
                                Lithuania
                            </option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</footer>
 
<footer class="footer">
  <div class="footer__main">
    <div class="container">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-4 large-3">
          {{#services}}
            <p class="h4 footer__title">{{heading}}</p>
            {{render '@atoms-list' this merge=true}}
          {{/services}}
        </div>
        <div class="cell pre-medium-auto">
          {{render '@molecules-contact' contacts merge=true}}
        </div>
        <div class="footer__cell cell large-shrink">
          {{render '@molecules-social-media' social-media merge=true}}
        </div>
      </div>
    </div>
  </div>
  <div class="footer__nav">
    <div class="container">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-auto">
          {{render '@atoms-list--horizontal' link-list merge=true}}
        </div>
        <div class="cell medium-shrink">
          {{render '@atoms-select--country-selector' country-selector merge=true}}
        </div>
      </div>
    </div>
  </div>
</footer>
 
{
  "services": {
    "heading": "Unsere Services",
    "tag": "ul",
    "items": [
      {
        "text": "<a href=\"#\">Materialinformationen</a>"
      },
      {
        "text": "<a href=\"#\">Liefer-& Zahlungsbedingungen</a>"
      },
      {
        "text": "<a href=\"#\">Gelangensbestätigung</a>"
      },
      {
        "text": "<a href=\"#\">Downloads</a>"
      },
      {
        "text": "<a href=\"#\">Händlersuche</a>"
      }
    ]
  },
  "contacts": {
    "contact": "REHAU AG + CO | Kontakt",
    "mixes": "footer__contact"
  },
  "social-media": {
    "mixes": "footer__social-media"
  },
  "link-list": {
    "mixes": "footer__list",
    "tag": "ul",
    "items": [
      {
        "text": "<a href=\"#\">Unternehmen</a>"
      },
      {
        "text": "<a href=\"#\">Karierre</a>"
      },
      {
        "text": "<a href=\"#\">Presse</a>"
      },
      {
        "text": "<a href=\"#\">Downloads</a>"
      },
      {
        "text": "<a href=\"#\">Unternehmensmagazin</a>"
      },
      {
        "text": "<a href=\"#\">Impressum</a>"
      },
      {
        "text": "<a href=\"#\">Datenschutz</a>"
      }
    ]
  },
  "country-selector": {
    "mixes": "footer__country-selector"
  }
}
  • Content: 
    /* Footer */

.footer {
  @include typography-level('footer');

  a {
    &,
    &:hover,
    &:active {
      color: inherit;
    }
  }

  &__main {
    padding-top: 5 * $base-padding;
    padding-bottom: 5 * $base-padding;
    background-color: $black;
    color: $white;

    @include breakpoint(pre-medium down) {
      padding-top: 4 * $base-padding;
      padding-bottom: 4 * $base-padding;
    }
  }

  &__nav {
    padding-top: $base-margin;
    padding-bottom: $base-margin;
    color: $black;

    @include breakpoint(pre-medium down) {
      padding-top: 3 * $base-padding;
      padding-bottom: 3 * $base-padding;
    }
  }

  &__title {
    margin-bottom: 2 * $base-margin;
  }

  &__contact {
    @include breakpoint(small down) {
      margin-top: $base-margin;
    }
  }

  &__cell {
    display: flex;
    align-items: center;
    justify-content: center;

    @include breakpoint(large) {
      align-items: flex-end;
    }
  }

  &__social-media {
    justify-content: center;

    @include breakpoint(large) {
      flex-direction: column;
      align-items: flex-end;
    }

    @include breakpoint(large down) {
      margin-top: $base-margin;
    }

    .social-media__list {
      justify-content: center;

      &.-social-icons {
        a {
          background-image: radial-gradient(circle closest-side, $white 67%, transparent 70%);
          color: $black;

          &:hover,
          &:active {
            color: $white;
          }
        }
      }
    }
  }

  &__list {
    @include breakpoint(small only) {
      &.list.-horizontal > .list__item {
        display: list-item;
        margin-right: 0;
      }
    }
  }

  &__country-selector {
    @include breakpoint(pre-medium down) {
      margin-top: $base-margin;
    }
  }
}
  • URL: /components/raw/organisms-footer/_footer.scss
  • Filesystem Path: src/components/02-ui-components/03-organisms/02-footer/_footer.scss
  • Size: 1.8 KB

There are no notes for this item.