# 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.