Copy environment

Footer 

<footer class="footer" data-theme="dark">
    <div class="footer__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--md-5 grid__col--lg-6">
                <h3 class="footer__contacts-title h3">Get in touch</h3>
                <div class="footer__contacts text text-small">
                    <p>Emajõe 1b,</p>
                    <p>Tartu, Estonia</p>
                    <p><a href="#">info@something.com</a></p>
                </div>
            </div>
            <div class="grid__col grid__col--md-7 grid__col--lg-6">

                <nav class="navigation navigation--footer footer__navigation">
                    <ul class="navigation__list navigation__list--parents">
                        <li class="navigation__item has-children navigation__item--divisible-by-3 ">
                            <svg class="icon  navigation__arrow-icon">
                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                            </svg>
                            <p class="navigation__link">
                                Index
                            </p>
                            <ul class="navigation__list navigation__list--children">
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Business transformation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Design &amp; Innovation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Development
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Maintenance
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                            </ul>
                        </li>
                        <li class="navigation__item has-children navigation__item--divisible-by-3 ">
                            <svg class="icon  navigation__arrow-icon">
                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                            </svg>
                            <p class="navigation__link">
                                Services
                            </p>
                            <ul class="navigation__list navigation__list--children">
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Business transformation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Design &amp; Innovation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Development
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Maintenance
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                            </ul>
                        </li>
                        <li class="navigation__item has-children navigation__item--divisible-by-3 ">
                            <svg class="icon  navigation__arrow-icon">
                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                            </svg>
                            <p class="navigation__link">
                                Industries
                            </p>
                            <ul class="navigation__list navigation__list--children">
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Business transformation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Design &amp; Innovation
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                                <li class="navigation__item  ">
                                    <a href="#" class="navigation__link">
                                        Development
                                    </a>

                                    <svg class="icon  navigation__arrow-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                    </svg>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="footer__inner h-container">
        <div class="cta  footer__cta">
            <div class="cta__container">
                <h3 class="h2 cta__text">
                    Got a project you dream of realizing?

                    <a href="#" class="button button--text cta__button">
                        <span class="button__inner">
                            <span class="button__text">Get in touch</span>
                        </span>
                    </a>
                    <a href="#" class="cta__link"><svg class="icon  cta__link-icon">
                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-top-right-long-54"></use>
                        </svg>
                        <span class="cta__link-inner">Get in touch</span></a>
                </h3>
            </div>
        </div>
    </div>
    <figure class="image  footer__bg-image">
        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20376%20282%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">

    </figure>
</footer>
 
<footer class="footer" data-theme="dark">
    <div class="footer__inner h-container">
        <div class="grid">
            {% if data.footerContacts %}
                <div class="grid__col grid__col--md-5 grid__col--lg-6">
                    {% if data.footerContacts.title %}
                        <h3 class="footer__contacts-title h3">{{ data.footerContacts.title }}</h3>
                    {% endif %}
                    {% if data.footerContacts.content %}
                        <div class="footer__contacts text text-small">{{ data.footerContacts.content }}</div>
                    {% endif %}
                </div>
            {% endif %}
            {% if data.footerNavigation %}
                <div class="grid__col grid__col--md-7 grid__col--lg-6">
                    {% include '@navigation' with { data: data.footerNavigation, modifier: 'navigation--footer', class: 'footer__navigation' } %}
                </div>
            {% endif %}
        </div>
    </div>
    {% if data.cta %}
        <div class="footer__inner h-container">
            {% include '@cta' with { data: data.cta, modifier: '', class: 'footer__cta'} %}
        </div>
    {% endif %}
    {% if data.footerBgImage %}
        {% include '@image' with { media: ['(min-width: 1024px)'], data: data.footerBgImage|srcset('376x282', ['1440x450']), modifier: '', class: 'footer__bg-image' } %}
    {% endif %}
</footer>

{
  "language": "en-US",
  "data": {
    "footerBgImage": true,
    "footerContacts": {
      "title": "Get in touch",
      "content": "<p>Emajõe 1b,</p><p>Tartu, Estonia</p><p><a href=\"#\">info@something.com</a></p>"
    },
    "footerNavigation": {
      "items": [
        {
          "title": "Index",
          "children": [
            {
              "link": "#",
              "title": "Business transformation"
            },
            {
              "link": "#",
              "title": "Design &amp; Innovation"
            },
            {
              "link": "#",
              "title": "Development"
            },
            {
              "link": "#",
              "title": "Maintenance"
            }
          ]
        },
        {
          "title": "Services",
          "children": [
            {
              "link": "#",
              "title": "Business transformation"
            },
            {
              "link": "#",
              "title": "Design &amp; Innovation"
            },
            {
              "link": "#",
              "title": "Development"
            },
            {
              "link": "#",
              "title": "Maintenance"
            }
          ]
        },
        {
          "title": "Industries",
          "children": [
            {
              "link": "#",
              "title": "Business transformation"
            },
            {
              "link": "#",
              "title": "Design &amp; Innovation"
            },
            {
              "link": "#",
              "title": "Development"
            }
          ]
        }
      ]
    },
    "cta": {
      "text": "Got a project you dream of realizing?",
      "button": {
        "text": "Get in touch",
        "link": "#"
      }
    }
  }
}
  • Content: 
    .footer {
    background-color: $color-brand-01;
    color: $color-text-03;
    padding: 46px 0;
    position: relative;
    z-index: map-get($zindex, 'default');

    @include bp(sm-min) {
        padding: 120px 0;
    }
}

.footer__cta {
    margin-top: 46px;
    padding-top: 46px;
    border-top: 1px solid $color-text-03;

    @include bp(sm-min) {
        margin-top: 106px;
        padding-top: 120px;
    }
}

.footer__contacts-title {
    margin-bottom: 16px;
    font-size: $font-size-h3-xs;
    line-height: $line-height-h3-xs;

    @include bp(md-min) {
        font-size: $font-size-h3-lg;
        line-height: $line-height-h3-lg;
        margin-bottom: 72px;
    }
}

.footer__contacts {
    margin-bottom: 16px;

    @include bp(sm-min) {
        margin-bottom: 0;
    }

    a {
        font-weight: $font-weight-regular;
        color: $color-text-03;
        position: relative;
        transition: $transition-duration $transition-easing;
        min-width: auto;
        padding: 0;
        text-transform: none;

        &:before {
            content: '';
            position: absolute;
            top: auto;
            left: auto;
            right: 0;
            bottom: -1px;
            width: 100%;
            border-bottom: 1px solid $color-text-03;
            transition: width $transition-duration $transition-easing-out $transition-duration, border-bottom $transition-duration $transition-easing-out;
        }

        &:hover:before {
            width: 0;
            transition: width $transition-duration $transition-easing-in, border-bottom $transition-duration $transition-easing-in;
        }

        &:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            border-bottom: 1px solid $color-text-03;
            transition: width $transition-duration $transition-easing-in, border-bottom $transition-duration $transition-easing-in;
        }

        &:hover:after {
            width: 100%;
            transition: width $transition-duration $transition-easing-out $transition-duration, border-bottom $transition-duration $transition-easing-out;
        }
    }
}

.footer__bg-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    max-height: 100%;
    overflow: hidden;
}

.image__img {
    .footer__bg-image & {
        width: 100%;
    }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/patterns/components/footer/footer.scss
  • Size: 2.4 KB
  • Handle: @footer--default
  • Filesystem Path: src/patterns/components/footer/footer.twig
  • References (3): @navigation, @cta, @image
  • Referenced by (1): @view-base