Swegon Component Library

Footer 

<footer class="footer ">
    <div class="footer__top">
        <div class="row">
            <div class="col  col--span-12  col--span-m-6  col--span-xl-3">
                <h4 class="footer__heading">Lär känna oss</h4>
                <ul class="footer__top-link-list">
                    <li>
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            Varför Swegon
                            <svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
                                <use xlink:href="#icon-minus-thin"></use>
                            </svg>
                            <svg class="icon  footer__icon footer__icon-plus" focusable="false">
                                <use xlink:href="#icon-plus-thin"></use>
                            </svg>
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href=#>Referenser </a>
                    </li>
                    <li>
                        <a href=#>Guider </a>
                    </li>
                    <li>
                        <a href=#>Produkter &amp; tjänster </a>
                    </li>
                    <li>
                        <a href=#>Support </a>
                    </li>
                </ul>
            </div>
            <div class="col  col--span-12  col--span-m-6  col--span-xl-4">
                <h4 class="footer__heading">Lär känna oss</h4>
                <ul class="footer__top-link-list">
                    <li>
                        <a href=#>Jobb och karriär </a>
                    </li>
                    <li>
                        <a href=#>Om Swegon </a>
                    </li>
                    <li>
                        <a href=#>För leverantörer </a>
                    </li>
                    <li>
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            Swegon e-sales
                            <svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
                                <use xlink:href="#icon-minus-thin"></use>
                            </svg>
                            <svg class="icon  footer__icon footer__icon-plus" focusable="false">
                                <use xlink:href="#icon-plus-thin"></use>
                            </svg>
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            Allt om inomhusklimat (blogg)
                            <svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
                                <use xlink:href="#icon-minus-thin"></use>
                            </svg>
                            <svg class="icon  footer__icon footer__icon-plus" focusable="false">
                                <use xlink:href="#icon-plus-thin"></use>
                            </svg>
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            Bättre luft hemma (blogg)
                            <svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
                                <use xlink:href="#icon-minus-thin"></use>
                            </svg>
                            <svg class="icon  footer__icon footer__icon-plus" focusable="false">
                                <use xlink:href="#icon-plus-thin"></use>
                            </svg>
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            Press
                            <svg class="icon footer__icon footer__icon-minus h-hidden" focusable="false">
                                <use xlink:href="#icon-minus-thin"></use>
                            </svg>
                            <svg class="icon  footer__icon footer__icon-plus" focusable="false">
                                <use xlink:href="#icon-plus-thin"></use>
                            </svg>
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                            <li>
                                <a href=#>Varför Swegon</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col  col--span-12  col--span-m-6  col--span-xl-3  col--footer__hubspot-wrapper">
                <h4 class="footer__heading">Prenumerera på våra bloggar</h4>
                <div class="footer__hubspot">

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            hbspt.forms.create({
                                css: '',
                                portalId: '3433011',
                                formId: 'bf44ac05-6b4c-4fc6-b90c-95bc78eac846',
                                target: '.footer .footer__hubspot'
                            });
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
    <div class="footer__some-logo">
        <div class="row">
            <div class="col">
                <ul class="footer__bottom-link-list footer__bottom-link-list--social">
                    <li>
                        <a href=# title="Youtube" target="_blank">
                            <svg class="icon footer__icon" focusable="false">
                                <use xlink:href="#icon-youtube"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href=# title="Facebook" target="_blank">
                            <svg class="icon footer__icon" focusable="false">
                                <use xlink:href="#icon-facebook"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href=# title="Linkedin" target="_blank">
                            <svg class="icon footer__icon" focusable="false">
                                <use xlink:href="#icon-linkedin"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="row row--align-end row--justify-between">
            <div class="col col--span-12 col--span-m-8 col--span-l-9">
                <address>
                    <p>Swegon Group AB, JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Tel +46 (0)31-89 58 00, Fax +46 (0)31-89 94 69, <a href='mailto:info@swegon.se'>info@swegon.se</a></p>
                    <ul class="footer__bottom-link-list">
                        <li>
                            <a href=#>Jobb och karriär</a>
                        </li>
                        <li>
                            <a href=#>Om Swegon</a>
                        </li>
                        <li>
                            <a href=#>För leverantörer</a>
                        </li>
                    </ul>
                </address>
            </div>
            <div class="col col--span-12 col--span-m-4 col--span-l-3 h-text-align-right-m">
                <a href="#" class="footer__logo-link">
                    <img src="/mocks/img/swegon-logo-white.svg" class="footer__logo-image" alt="#" />
                </a>
            </div>
        </div>
    </div>
</footer>
 
<footer class="footer {{additionalClasses}}">
    <div class="footer__top">
        <div class="row">
            {{#with top}}
            {{#each cols}}
            <div class="col {{getmodifiers modifiers " col"}}">
                <h4 class="footer__heading">{{title}}</h4>
                {{#if links}}
                <ul class="footer__top-link-list">
                    {{#each links}}
                    <li>
                        {{#unless children}}
                        <a href={{this.href}}>{{this.title}} </a>
                        {{/unless}}
                        {{#if children}}
                        <button class='footer__sub-link-toggle' aria-expanded="false">
                            {{this.title}}
                            {{>@icon id="minus-thin" additionalClasses="footer__icon footer__icon-minus h-hidden" }}
                            {{>@icon id="plus-thin" additionalClasses=" footer__icon footer__icon-plus" }}
                        </button>
                        <ul class="footer__sub-link-list h-hidden-from-view">
                            {{#each children}}
                            <li>
                                <a href={{this.href}}>{{this.title}}</a>
                            </li>
                            {{/each}}
                        </ul>
                        {{/if}}
                    </li>
                    {{/each}}
                </ul>
                {{/if}}
                {{#if hubspot}}
                <div class="footer__hubspot">
                    {{{hubspot}}}
                </div>
                {{/if}}
            </div>
            {{/each}}
            {{/with}}
        </div>
    </div>
    <div class="footer__some-logo">
        <div class="row">
            <div class="col">
                <ul class="footer__bottom-link-list footer__bottom-link-list--social">
                    {{#each bottom.socialLinks}}
                    <li>
                        <a href={{this.href}} title="{{this.title}}" target="_blank">
                            {{>@icon id=this.iconId additionalClasses="footer__icon"}}
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="row row--align-end row--justify-between">
            {{#with bottom}}
            <div class="col col--span-12 col--span-m-8 col--span-l-9">
                <address>
                    <p>{{{adress}}}</p>
                    <ul class="footer__bottom-link-list">
                        {{#each links}}
                        <li>
                            <a href={{this.href}}>{{this.title}}</a>
                        </li>
                        {{/each}}
                    </ul>
                </address>
            </div>
            <div class="col col--span-12 col--span-m-4 col--span-l-3 h-text-align-right-m">
                <a href="{{../logo.link}}" class="footer__logo-link">
                    <img src="{{../logo.src}}" class="footer__logo-image" alt="#" />
                </a>
            </div>
            {{/with}}
        </div>
    </div>
</footer>
 
{
  "top": {
    "cols": [
      {
        "title": "Lär känna oss",
        "modifiers": [
          "span-12",
          "span-m-6",
          "span-xl-3"
        ],
        "links": [
          {
            "title": "Varför Swegon",
            "href": "#",
            "children": [
              {
                "title": "Varför Swegon",
                "href": "#"
              },
              {
                "title": "Varför Swegon",
                "href": "#"
              }
            ]
          },
          {
            "title": "Referenser",
            "href": "#",
            "children": []
          },
          {
            "title": "Guider",
            "href": "#",
            "children": []
          },
          {
            "title": "Produkter & tjänster",
            "href": "#",
            "children": []
          },
          {
            "title": "Support",
            "href": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Lär känna oss",
        "modifiers": [
          "span-12",
          "span-m-6",
          "span-xl-4"
        ],
        "links": [
          {
            "title": "Jobb och karriär",
            "href": "#",
            "children": []
          },
          {
            "title": "Om Swegon",
            "href": "#",
            "children": []
          },
          {
            "title": "För leverantörer",
            "href": "#",
            "children": []
          },
          {
            "title": "Swegon e-sales",
            "href": "#",
            "children": [
              {
                "title": "Varför Swegon",
                "href": "#"
              },
              {
                "title": "Varför Swegon",
                "href": "#"
              }
            ]
          },
          {
            "title": "Allt om inomhusklimat (blogg)",
            "href": "#",
            "children": [
              {
                "title": "Varför Swegon",
                "href": "#"
              },
              {
                "title": "Varför Swegon",
                "href": "#"
              }
            ]
          },
          {
            "title": "Bättre luft hemma (blogg)",
            "href": "#",
            "children": [
              {
                "title": "Varför Swegon",
                "href": "#"
              },
              {
                "title": "Varför Swegon",
                "href": "#"
              }
            ]
          },
          {
            "title": "Press",
            "href": "#",
            "children": [
              {
                "title": "Varför Swegon",
                "href": "#"
              },
              {
                "title": "Varför Swegon",
                "href": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Prenumerera på våra bloggar",
        "modifiers": [
          "span-12",
          "span-m-6",
          "span-xl-3",
          "footer__hubspot-wrapper"
        ],
        "hubspot": "\n                        <script>\n                            document.addEventListener('DOMContentLoaded', function() {\n                                hbspt.forms.create({\n                                    css: '',\n                                    portalId: '3433011',\n                                    formId: 'bf44ac05-6b4c-4fc6-b90c-95bc78eac846',\n                                    target: '.footer .footer__hubspot'\n                                });\n                            });\n                        </script>\n                    "
      }
    ]
  },
  "logo": {
    "src": "/mocks/img/swegon-logo-white.svg",
    "link": "#"
  },
  "bottom": {
    "adress": "Swegon Group AB, JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Tel +46 (0)31-89 58 00, Fax +46 (0)31-89 94 69, <a href='mailto:info@swegon.se'>info@swegon.se</a>",
    "links": [
      {
        "title": "Jobb och karriär",
        "href": "#"
      },
      {
        "title": "Om Swegon",
        "href": "#"
      },
      {
        "title": "För leverantörer",
        "href": "#"
      }
    ],
    "socialLinks": [
      {
        "title": "Youtube",
        "href": "#",
        "iconId": "youtube"
      },
      {
        "title": "Facebook",
        "href": "#",
        "iconId": "facebook"
      },
      {
        "title": "Linkedin",
        "href": "#",
        "iconId": "linkedin"
      }
    ]
  }
}
  • Content: 
    export default function Footer() {
    const footerLinks = document.querySelectorAll('.footer__top-link-list .footer__sub-link-toggle');

    footerLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const minus = link.querySelector('.footer__icon-minus');
            const plus = link.querySelector('.footer__icon-plus');
            const subLinkList = link.nextElementSibling;

            minus.classList.toggle('h-hidden');
            plus.classList.toggle('h-hidden');
            subLinkList.classList.toggle('h-hidden-from-view');

            const isExpanded = link.getAttribute('aria-expanded') === 'true';
            link.setAttribute('aria-expanded', String(!isExpanded));
        });
    });
}
  • URL: /components/raw/footer/Footer.js
  • Filesystem Path: src/components/footer/Footer.js
  • Size: 775 Bytes
  • Content: 
    .footer__top {
    padding: size(3);
    margin-top: 32px;
    @include spacing-main-inner;

    .col {
        margin-bottom: size(5);
    }

    @include breakpoint($l) {
        padding: 0 size(7) size(7) size(7);
        margin-top: 56px;
    }

    @include spacing-main-inner;

    &>div {
        position: relative;
        padding-top: size(5);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 100vw;
            border-top: 1px solid $color-gray-1;
            transform: translateX(-50%);
            pointer-events: none;
        }
    }
}

.footer__top-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: size(2);
    line-height: size(3);
    row-gap: size(1);
    display: flex;
    flex-direction: column;

    a {
        color: $color-black;
    }

    button {
        color: $color-black;
    }

    .footer__icon {
        stroke: $color-black;
    }
}

.footer__bottom {
    padding: size(2) 0;
    font-size: size(1.75);

    p {
        margin-bottom: 0;
        color: $color-gray-4;
        line-height: size(3);
    }

    address {
        font-style: normal;
    }

    a {
        @include color-theme {
            color: $arg-theme-color;
        }
    }

    @include spacing-main-inner;
}

.footer__some-logo {
    padding: size(1) 0;

    @include spacing-main-inner;
}

.footer__logo-link {
    display: flex;
    justify-content: start;
    margin-top: 100px;

    @include breakpoint($m) {
        justify-content: end;
        margin-top: 0;
    }
}

.footer__logo-image {
    display: block;
    height: 28px;

    @include breakpoint($xl) {
        height: 36px;
    }
}

.footer__bottom-link-list {
    list-style: none;
    margin: 0;
    margin-top: 24px;
    padding: 0;
    display: flex;
    column-gap: size(2);
    row-gap: size(1);
    flex-wrap: wrap;

    @include breakpoint($l) {
        margin-top: 0;
    }

    a {
        @include color-theme {
            color: $arg-theme-color;
        }
    }

    li {
        display: inline-block;
        clear: both;
    }
}

.footer__bottom-link-list--social {
    margin-top: size(2);
    align-items: center;
    column-gap: 13px;

    li {
        height: 24px;
    }

    @include breakpoint($m) {
        margin: 0;
    }
}

.footer__heading {
    @include color-theme {
        color: $color-black;
    }
}

.footer__icon {
    width: 24px;
    height: 24px;
}

.footer__sub-link-list {
    list-style: none;
    padding-left: size(2);
    row-gap: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 8px;

}

.footer__sub-link-toggle {
    display: flex;

    &:hover {
        cursor: pointer;
    }
}

.col--footer__hubspot-wrapper {
    @include breakpoint($xl) {
        padding-left: 56px !important;
        border-left: 1px solid $color-gray-1;
    }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/footer/footer.scss
  • Size: 2.9 KB
  • Content: 
    import Footer from './Footer';
new Footer();
  • URL: /components/raw/footer/index.js
  • Filesystem Path: src/components/footer/index.js
  • Size: 45 Bytes

No notes defined.