Footer

Preview
HTML
View
Context
Assets
Info


        
        
        <footer class="footer">
    <div class="footer__top grid grid--no-gutter">
        <div class="footer__col grid__col grid__col--md-8">
            <div class="footer__link-title text-small">facebook</div>
            <div class="footer__link-wrapper h2">
                <a class="footer__link" href="#">
                    @lettersfromtartu
                </a>
            </div>
        </div>
        <div class="footer__col grid__col grid__col--md-9 grid__col--lg-10">
            <form class="newsletter  footer__newsletter newsletter--block">
                <div class="newsletter__textfield-container">
                    <div class="newsletter__button-wrapper">

                        <div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
                            <div class="textfield__inner">
                                <input class="textfield__input" type="text" id="footerEmail" name="textfield" placeholder="Enter your email here">
                                <label class="textfield__label text-button " for="footerEmail">
                                    newsletter
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="button  newsletter__button newsletter__button--mobile ">

                            <span class="button__inner" data-text="subscribe">
                                <span class="button__text">
                                    subscribe

                                </span>
                            </span>
                        </button>
                    </div>
                    <div class="newsletter__button-wrapper">
                        <div class="newsletter__label text-small">
                            newsletter
                            <span class="newsletter__error-message"></span>
                        </div>

                        <button type="submit" class="button  newsletter__button ">

                            <span class="button__inner" data-text="subscribe">
                                <span class="button__text">
                                    subscribe

                                </span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="newsletter__success">
                    <div class="text-large newsletter__vw-title">
                        Thank you for signing up!
                    </div>
                    Your subscription has been confirmed. You've been added to our list and will hear back from us soon.
                </div>
            </form>
        </div>
        <div class="footer__col grid__col grid__col--md-7 grid__col--lg-6">
            <div class="button-list button-list--col-2 footer__button-list">
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="Search">
                            <span class="button__text">
                                Search
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="FAQ">
                            <span class="button__text">
                                FAQ
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="Index">
                            <span class="button__text">
                                Index
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="Fonts">
                            <span class="button__text">
                                Fonts
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="About">
                            <span class="button__text">
                                About
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="button-list__item">

                    <a href="#" class="button button--icon-text button-list__button ">

                        <span class="button__inner" data-text="Contact">
                            <span class="button__text">
                                Contact
                                <svg class="icon button__icon--appear button__icon">
                                    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="footer__bottom-left text-small">
            2020 Letters from Tartu. All rights reserved.
        </div>

        <div class="logo  footer__logo">
            <a href="#" class="logo__content logo__link">
                <figure class="image  logo__image">
                    <img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">

                </figure>

            </a>
        </div>
        <div class="footer__bottom-right text-small">
            <a class="link" href="#">
                Terms and conditions
            </a>
        </div>
    </div>
</footer>


        <footer class="footer">
    <div class="footer__top grid grid--no-gutter">
        {% if data.socialMedia %}
            <div class="footer__col grid__col grid__col--md-8">
                <div class="footer__link-title text-small">{{ data.socialMedia.title }}</div>
                <div class="footer__link-wrapper h2">
                    <a class="footer__link" href="{{ data.socialMedia.link }}">
                        {{ data.socialMedia.text }}
                    </a>
                </div>
            </div>
        {% endif %}
        {% if data.newsletter %}
            <div class="footer__col grid__col grid__col--md-9 grid__col--lg-10">
                {% include '@newsletter' with {class: "footer__newsletter", data: data.newsletter} %}
            </div>
        {% endif %}
        {% if data.buttonList %}
            <div class="footer__col grid__col grid__col--md-7 grid__col--lg-6">
                {% include '@button-list' with {class: "footer__button-list", modifier: "button-list--col-2", data: data.buttonList}%}
            </div>
        {% endif %}
    </div>
    <div class="footer__bottom">
        {% if data.rightsText %}
            <div class="footer__bottom-left text-small">
                {{ data.rightsText }}
            </div>
        {% endif %}
        {% if data.logo %}
            {% include '@logo' with {class: "footer__logo", data: data.logo} %}
        {% endif %}
        {% if data.terms %}
            <div class="footer__bottom-right text-small">
                <a class="link" href="{{ data.terms.link }}">
                    {{ data.terms.text }}
                </a>
            </div>
        {% endif %}
    </div>
</footer>


        {
  "language": "en-US",
  "data": {
    "socialMedia": {
      "title": "facebook",
      "text": " @lettersfromtartu",
      "link": "#"
    },
    "rightsText": "2020 Letters from Tartu. All rights reserved.",
    "terms": {
      "text": "Terms and conditions",
      "link": "#"
    },
    "logo": {
      "image": {
        "alt": "letters-logo",
        "srcset": "../../inc/logo/logo.svg"
      },
      "link": "#"
    },
    "newsletter": {
      "textfield": {
        "label": "newsletter",
        "id": "footerEmail",
        "name": "textfield",
        "placeholder": "Enter your email here"
      },
      "button": {
        "text": "subscribe"
      },
      "buttonMobile": {
        "icon": "arrow-enter-bold"
      },
      "label": "newsletter",
      "thanks": {
        "title": "Thank you for signing up!",
        "message": "Your subscription has been confirmed. You've been added to our list and will hear back from us soon."
      }
    },
    "buttonList": {
      "buttonModifier": "button--icon-text button-ico",
      "buttons": [
        {
          "text": "Search",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        },
        {
          "text": "FAQ",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        },
        {
          "text": "Index",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        },
        {
          "text": "Fonts",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        },
        {
          "text": "About",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        },
        {
          "text": "Contact",
          "icon": "arrow-right",
          "iconAppear": true,
          "link": "#"
        }
      ]
    }
  }
}

File:

Content:


                                .footer {
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 0 0 var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: box-shadow;
    margin-top: -1px;
}

.footer__bottom {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 96px;
    width: 100%;
    align-items: center;

    @include bp(sm-min) {
        flex-direction: row;
        height: 60px;
    }
}

.footer__col {
    display: flex;
    flex-direction: column;
    justify-content: center;

    & + & {
        box-shadow: 0 -1px 0 0 var(--color-brand) inset;
        transition: $transition-duration $transition-easing;
        transition-property: box-shadow;

        @include bp(md-min) {
            box-shadow: 1px -1px 0 0 var(--color-brand) inset;
        }
    }
}

.footer__newsletter {
    width: 100%;
    height: 100%;
}

.footer__link-title {
    text-transform: uppercase;
    box-shadow: 0 -1px 0 0 var(--color-brand) inset;
    opacity: .7;
    flex-grow: 0;
    transition: $transition-duration $transition-easing;
    transition-property: box-shadow;
    padding: 6px 16px 5px;

    @include bp(sm-min) {
        padding: 2px 32px;
    }
}

.footer__link-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    word-wrap: break-word;
    padding: 22px 0;

    @include bp(sm-min) {
        box-shadow: 0 -1px 0 0 var(--color-brand) inset;
        transition: $transition-duration $transition-easing;
        transition-property: box-shadow;
    }

    @include  bp(md-min) {
        padding: 0;
    }
}

.footer__link {
    font-size: #{'min(8vw, #{$font-size-h2})'};

    @include bp(sm-min) {
        font-size: 30px;
    }

    &:after {
        border-bottom: none;
    }

    &:before {
        border-bottom: none;
    }
}

.footer__button-list {
    padding: 20px 13% 20px 30%;

    @include  bp(md-min) {
        padding: 0 5% 0 20%;
    }

    @include  bp(lg-min) {
        padding: 0 5% 0 25%;
    }
}

.footer__logo {
    margin: auto;
    position: absolute;
    width: 210px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image__img {
    .footer__logo & {
        max-width: 100%;
    }
}

.footer__bottom-left {
    opacity: .7;
    padding-bottom: 16px;

    @include bp(sm-min) {
        padding-left: 32px;
        padding-bottom: 0;
    }
}

.footer__bottom-right {
    opacity: .7;
    padding-top: 15px;

    @include bp(sm-min) {
        padding-top: 0;
        padding-right: 32px;
    }
}

.newsletter__textfield-container {
    .footer & {
        height: 100%;
    }
}

.newsletter__button-wrapper {
    .footer &:first-child {
        flex-grow: 1;
    }
}

.textfield__input {
    .footer .newsletter & {
        height: 100%;
    }
}

URL: /components/raw/footer/footer.scss
Filesystem Path: src/patterns/modules/footer/footer.scss
Size: 2.9 KB

Content:


                                import '@button';

import './footer.scss';

URL: /components/raw/footer/footer.ts
Filesystem Path: src/patterns/modules/footer/footer.ts
Size: 43 Bytes

Handle: @footer--default
Filesystem Path: src/patterns/modules/footer/footer.twig
References (3): @newsletter, @button-list, @logo
Referenced by (1): @view-base

Footer

Forms

Notifications

Copy environment

Footer