Footer

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="stripe stripe--secondary">
    <footer class="footer">
        <div class="footer__form">
            <h2 class="footer__heading">Get in touch</h2>
            <p class="footer__paragraph"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
            <p class="footer__paragraph">Sed do eiusmod <a href="#" class="footer__link">tempor</a> incididunt ut labore et dolore magna.</p>
            <form class="form--inverted">
                <div class="form-group">
                    <label class="form-label" for="first_name">Name</label>
                    <input type="text" id="name" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="last_name">Email</label>
                    <input type="email" id="email" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="bio">Your message</label>
                    <textarea id="bio" class="form-control" rows="8"></textarea>
                </div>
                <button type="submit" class="btn btn--small btn--inverted">Submit</button>
            </form>
        </div>

        <div class="footer__list__section">
            <h2 class="footer__heading">Links</h2>
            <ul class="footer__list">
                <li class="footer__list__item"><a href="#" class="footer__list__link">Newsletter</a></li>
                <li class="footer__list__item"><a href="#" class="footer__list__link">Blog</a></li>
            </ul>
        </div>

        <div class="footer__list__section">
            <h2 class="footer__heading">Expertise</h2>
            <ul class="footer__list">
                <li class="footer__list__item"><a href="#" class="footer__list__link">Strategie- und Technologieberatung</a></li>
                <li class="footer__list__item"><a href="#" class="footer__list__link">Entwicklung digitaler Geschäftsmodelle</a></li>
            </ul>
        </div>

        <div class="footer__offices">
            <div class="footer__offices__section">
                <h2 class="footer__heading">Offices</h2>
                <h3 class="footer__subheading">INNOQ Deutschland GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br />
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br />
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br />
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                </ul>
            </div>

            <div class="footer__offices__section">
                <h3 class="footer__subheading">INNOQ Schweiz GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Gewerbestr. 11</span><br />
                            <span itemprop="postalCode">6330</span> <span itemprop="addressLocality">Cham</span><br />
                            Tel <span itemprop="telephone">(+41) 41 743 01 11</span><br />
                            <a href="https://goo.gl/maps/N9qbZPPjr9R2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Albulastr. 55</span><br />
                            <span itemprop="postalCode">8048</span> <span itemprop="addressLocality">Zürich</span><br />
                            <a href="https://goo.gl/maps/s3CffwfWG362" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</div>


        <div class="stripe stripe--secondary">
    <footer class="footer">
        <div class="footer__form">
            <h2 class="footer__heading">Get in touch</h2>
            <p class="footer__paragraph"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
            <p class="footer__paragraph">Sed do eiusmod <a href="#" class="footer__link">tempor</a> incididunt ut labore et dolore magna.</p>
            <form class="form--inverted">
                <div class="form-group">
                    <label class="form-label" for="first_name">Name</label>
                    <input type="text" id="name" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="last_name">Email</label>
                    <input type="email" id="email" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="bio">Your message</label>
                    <textarea id="bio" class="form-control" rows="8"></textarea>
                </div>
                <button type="submit" class="btn btn--small btn--inverted">Submit</button>
            </form>
        </div>

        <div class="footer__list__section">
            <h2 class="footer__heading">Links</h2>
            <ul class="footer__list">
                <li class="footer__list__item"><a href="#" class="footer__list__link">Newsletter</a></li>
                <li class="footer__list__item"><a href="#" class="footer__list__link">Blog</a></li>
            </ul>
        </div>

        <div class="footer__list__section">
            <h2 class="footer__heading">Expertise</h2>
            <ul class="footer__list">
                <li class="footer__list__item"><a href="#" class="footer__list__link">Strategie- und Technologieberatung</a></li>
                <li class="footer__list__item"><a href="#" class="footer__list__link">Entwicklung digitaler Geschäftsmodelle</a></li>
            </ul>
        </div>

        <div class="footer__offices">
            <div class="footer__offices__section">
                <h2 class="footer__heading">Offices</h2>
                <h3 class="footer__subheading">INNOQ Deutschland GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Krischerstr. 100</span><br/>
                            <span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
                            Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
                            <a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                </ul>
            </div>

            <div class="footer__offices__section">
                <h3 class="footer__subheading">INNOQ Schweiz GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Gewerbestr. 11</span><br/>
                            <span itemprop="postalCode">6330</span> <span itemprop="addressLocality">Cham</span><br/>
                            Tel <span itemprop="telephone">(+41) 41 743 01 11</span><br/>
                            <a href="https://goo.gl/maps/N9qbZPPjr9R2" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                    <li>
                        <address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Albulastr. 55</span><br/>
                            <span itemprop="postalCode">8048</span> <span itemprop="addressLocality">Zürich</span><br/>
                            <a href="https://goo.gl/maps/s3CffwfWG362" class="footer__directions-link">Directions</a>
                        </address>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</div>


        
            
            /* No context defined. */

File:

Content:


                                .footer {
  @extend %container-vertical-spacing-xl;

  display: grid;
  gap: $spacer-base;
  align-items: start;

  width: 100%;
  max-width: $default-page-layout-content-width-xl;
  margin: 0 auto;
  padding: 0 $spacer-sm;

  color: $footer-color;
}

.footer__form,
.footer__offices__section,
.footer__list__section {
  display: grid;
  gap: $spacer-xs;
}

.footer__offices {
  display: grid;
  gap: $spacer-base;
}

.footer__offices__section__list {
  @extend %list-unstyled;

  display: grid;
  gap: $spacer-base;
}

.footer__paragraph,
.footer__address {
  @extend %heading-font-regular;

  font-size: $font-size-base;
  line-height: $paragraph-line-height;
}

.footer__heading {
  color: $footer-heading-color;
}

.footer__subheading {
  font-size: $font-size-sm;
  color: $footer-color;
}

.footer__directions-link {
  @extend %heading-font-bold;

  display: block;

  margin-top: $spacer-xs;

  font-size: $font-size-xxs;
  color: $footer-color;
  text-transform: uppercase;

  &::before {
    content: asset-url('icons/pin.svg');

    display: inline-block;

    width: $font-size-xxs;
    height: $font-size-xxs;
    margin-right: $spacer-xxs;

    color: $footer-heading-color;
  }
}

.footer__link {
  hyphens: none;
  color: $footer-color;
  border-bottom: 2px solid $footer-color;

  &:hover,
  &:focus {
    border-bottom: 2px solid $footer-link-hover-color;
  }
}

.footer__link,
.footer__directions-link,
.footer__list__link {
  @extend %link-unstyled;

  transition: standard-transition(color);

  &:hover,
  &:focus {
    color: $footer-link-hover-color;
  }
}

.footer__list {
  @extend %list-unstyled;

  line-height: $paragraph-line-height;

  > * + * {
    margin-top: $spacer-xs;
  }
}

.footer__list__item {
  @extend %heading-font-regular;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: $spacer-xl $spacer-lg;

    padding: 0 $spacer-base;
  }

  .footer__form {
    grid-row: 1 / 2;
  }

  .footer__offices {
    grid-row: 1;
  }

  .footer__offices__section__list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: $spacer-md;
  }
}

URL: /components/raw/footer/_footer.scss
Filesystem Path: components/03-organisms/footer/_footer.scss
Size: 2.2 KB

Handle: @footer
Preview:
- With layout
- Component only
Filesystem Path: components/03-organisms/footer/footer.html

No notes defined.