MIUN - Design Library

Footer Block 

<footer>
    <div class="container">
        <div class="row contact-us justify-content-center">
            <div class="col-md-4 contact-card">
                <div class="contact-icon">
                    <span class="material-icons">phone</span>
                </div>
                <div class="contact-url">
                    <a href="tel:+46101428000">+46 (0)10 1428000</a>
                </div>
                <div class="contact-text">
                    <p>Måndag - fredag kl. 8-16</p>
                </div>
            </div>
            <div class="col-md-4 contact-card">
                <div class="contact-icon">
                    <span class="material-icons">mail_outline</span>
                </div>
                <div class="contact-url">
                    <a href="mailto:kontakt@miun.se">kontakt@miun.se</a>
                </div>
                <div class="contact-text">
                    <p>Vi svarar på epost måndag till fredag</p>
                </div>
            </div>
            <div class="col-md-4 contact-card">
                <div class="contact-icon">
                    <span class="material-icons">info_outline</span>
                </div>
                <div class="contact-url">
                    <a href="https://google.se">Kris och säkerhet</a>
                </div>
                <div class="contact-text">
                    <p>Om nödsituation skulle uppstå</p>
                </div>
            </div>
        </div>
        <ul class="social-links list-unstyled">
            <li>
                <a href="https://facebook.com">Facebook</a>
            </li>
            <li>
                <a href="https://youtube.com">Youtube</a>
            </li>
            <li>
                <a href="https://twitter.com">Twitter</a>
            </li>
            <li>
                <a href="https://instagram.com">Instagram</a>
            </li>
            <li>
                <a href="https://linkedin.com">LinkedIn</a>
            </li>
        </ul>
    </div>
</footer>
 
<footer>
    <div class="container">
        <div class="row contact-us justify-content-center">
            {{#each this.contacts}}
            <div class="col-md-4 contact-card">
                <div class="contact-icon">
                    <span class="material-icons">{{ this.iconClass }}</span>
                </div>
                <div class="contact-url">
                    <a href="{{this.contactUrl}}">{{this.contactUrlText}}</a>
                </div>
                <div class="contact-text">
                    <p>{{this.contactText}}</p>
                </div>
            </div>
            {{/each}}
        </div>
        {{#if this.socialLinks}}
        <ul class="social-links list-unstyled">
            {{#each this.socialLinks}}
                <li>
                    {{#if this.socialUrl }}
                        <a href="{{ this.socialUrl }}">{{ this.socialName }}</a>
                    {{/if}}	
                </li>
            {{/each}}
        </ul>
        {{/if}}
    </div>
</footer>
{{{epiclientscripts 'Footer' }}}
 
{
  "contacts": [
    {
      "iconClass": "phone",
      "contactUrl": "tel:+46101428000",
      "contactUrlText": "+46 (0)10 1428000",
      "contactText": "Måndag - fredag kl. 8-16"
    },
    {
      "iconClass": "mail_outline",
      "contactUrl": "mailto:kontakt@miun.se",
      "contactUrlText": "kontakt@miun.se",
      "contactText": "Vi svarar på epost måndag till fredag"
    },
    {
      "iconClass": "info_outline",
      "contactUrl": "https://google.se",
      "contactUrlText": "Kris och säkerhet",
      "contactText": "Om nödsituation skulle uppstå"
    }
  ],
  "socialLinks": [
    {
      "socialName": "Facebook",
      "socialUrl": "https://facebook.com"
    },
    {
      "socialName": "Youtube",
      "socialUrl": "https://youtube.com"
    },
    {
      "socialName": "Twitter",
      "socialUrl": "https://twitter.com"
    },
    {
      "socialName": "Instagram",
      "socialUrl": "https://instagram.com"
    },
    {
      "socialName": "LinkedIn",
      "socialUrl": "https://linkedin.com"
    }
  ]
}
  • Content: 
    footer {
    padding: $sm-space 0 40px 0;
    box-shadow: inset 0px 1px 0px #E5E5E5;

    .contact-card {
        text-align: center;

        .contact-icon {

            span {
                font-size: 40px;
                color: $blue;
            }
        }

        .contact-url a {
            font-family: 'Lato Bold';
            font-size: 18px;
        }

        .contact-text {
            margin-bottom: $sm-space;

            p {
                margin-bottom: 0;
                font-size: 16px;
    line-height: 24px;
            }
        }
    }

    .social-links {
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
        li{
            padding: 0 $xs-space;
        }
        a {
            font-family: 'Lato Bold';
            color: $dark-grey;
            font-size: 16px;
            line-height: 24px;
        }

        a:not(:last-of-type) {
            margin-right: $sm-space;
        }
    }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src\components\01-global_components\footer\footer.scss
  • Size: 1 KB

There are no notes for this item.