Swegon Component Library

Footer: Default 

<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>
                        <a href=#>Varför Swegon</a>
                    </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>
                        <a href=#>Swegon e-sales</a>
                    </li>
                    <li>
                        <a href=#>Allt om inomhusklimat (blogg)</a>
                    </li>
                    <li>
                        <a href=#>Bättre luft hemma (blogg)</a>
                    </li>
                    <li>
                        <a href=#>Press</a>
                    </li>
                </ul>
            </div>
            <div class="col col--span-12 col--span-m-6 col--span-xl-3">
                <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__logo">
        <div class="row">
            <div class="col">
                <a href="#" class="footer__logo-link">
                    <img src="/mocks/img/swegon-logo-white.svg" class="footer__logo-image" alt="#" />
                </a>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="row row--align-center 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">
                <ul class="footer__bottom-link-list footer__bottom-link-list--social">
                    <li>
                        <a href=# title="Youtube" target="_blank">
                            <img src="/mocks/img/youtube.svg" alt="Youtube icon">
                        </a>
                    </li>
                    <li>
                        <a href=# title="Linkedin" target="_blank">
                            <img src="/mocks/img/linkedin.svg" alt="Linkedin icon">
                        </a>
                    </li>
                    <li>
                        <a href=# title="Twitter" target="_blank">
                            <img src="/mocks/img/twitter.svg" alt="Twitter icon">
                        </a>
                    </li>
                    <li>
                        <a href=# title="Facebook" target="_blank">
                            <img src="/mocks/img/facebook.svg" alt="Facebook icon">
                        </a>
                    </li>
                </ul>
            </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>
                                        <a href={{this.href}}>{{this.title}}</a>
                                    </li>
                                {{/each}}
                            </ul>
                        {{/if}}
                        {{#if hubspot}}
                            <div class="footer__hubspot">
                                {{{hubspot}}}
                            </div>
                        {{/if}}
                    </div>
                {{/each}}
            {{/with}}
        </div>
    </div>
    <div class="footer__logo">
        <div class="row">
            <div class="col">
                <a href="{{logo.link}}" class="footer__logo-link">
                    <img src="{{logo.src}}" class="footer__logo-image" alt="#" />
                </a>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="row row--align-center 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">
                    <ul class="footer__bottom-link-list footer__bottom-link-list--social">
                        {{#each socialLinks}}
                            <li>
                                <a href={{this.href}} title="{{this.title}}" target="_blank">
                                    <img src="{{this.icon}}" alt="{{this.alt}}">
                                </a>
                            </li>
                        {{/each}}
                    </ul>
                </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": "#"
          },
          {
            "title": "Referenser",
            "href": "#"
          },
          {
            "title": "Guider",
            "href": "#"
          },
          {
            "title": "Produkter & tjänster",
            "href": "#"
          },
          {
            "title": "Support",
            "href": "#"
          }
        ]
      },
      {
        "title": "Lär känna oss",
        "modifiers": [
          "span-12",
          "span-m-6",
          "span-xl-4"
        ],
        "links": [
          {
            "title": "Jobb och karriär",
            "href": "#"
          },
          {
            "title": "Om Swegon",
            "href": "#"
          },
          {
            "title": "För leverantörer",
            "href": "#"
          },
          {
            "title": "Swegon e-sales",
            "href": "#"
          },
          {
            "title": "Allt om inomhusklimat (blogg)",
            "href": "#"
          },
          {
            "title": "Bättre luft hemma (blogg)",
            "href": "#"
          },
          {
            "title": "Press",
            "href": "#"
          }
        ]
      },
      {
        "title": "Prenumerera på våra bloggar",
        "modifiers": [
          "span-12",
          "span-m-6",
          "span-xl-3"
        ],
        "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",
        "icon": "/mocks/img/youtube.svg",
        "alt": "Youtube icon",
        "href": "#"
      },
      {
        "title": "Linkedin",
        "icon": "/mocks/img/linkedin.svg",
        "alt": "Linkedin icon",
        "href": "#"
      },
      {
        "title": "Twitter",
        "icon": "/mocks/img/twitter.svg",
        "alt": "Twitter icon",
        "href": "#"
      },
      {
        "title": "Facebook",
        "icon": "/mocks/img/facebook.svg",
        "alt": "Facebook icon",
        "href": "#"
      }
    ]
  }
}
  • Content: 
    .footer__top {
    background: $color-green-pale;
    padding: size(3);
    @include spacing-main-inner;

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

    @include breakpoint($l) {
        padding: size(7);
    }

    @include spacing-main-inner;

    @include color-theme {
        background: rgba($arg-theme-color, 0.3);
    }

    .theme--blue & {
        background-color: $color-blue-3;
    }
}

.footer__top-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: size(2.5);
    line-height: size(4);

    a {
        color: $color-green-dark;

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

.footer__bottom {
    padding: size(2) 0;
    background: $color-gray-1;
    font-size: size(1.75);

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

    address {
        font-style: normal;
    }

    a {
        color: $color-green-dark;

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

    @include spacing-main-inner;
}

.footer__logo {
    padding: size(3) 0;
    background: $color-green;

    @include breakpoint($xl) {
        padding: size(3.5) 0;
    }

    @include spacing-main-inner;

    @include color-theme {
        background-color: $color-white;
    }
}

.footer__logo-link {
    display: block;
}

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

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

.footer__bottom-link-list {
    list-style: none;
    margin: 0;
    padding: 0;

    a {
        color: $color-green-dark;

        @include color-theme {
            color: $arg-theme-color;
        }
    }
    li {
        display: inline-block;
        margin-right: size(2);
        clear: both;
    }
}

.footer__bottom-link-list--social {
    margin-top: size(2);

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

.footer__heading {
    @include color-theme {
        color: $color-black;
    }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/footer/footer.scss
  • Size: 2 KB

No notes defined.