Lunds universitet - Style Guide

Footer: A: Lunds universitet 

<footer class="footer">
    <div class="container py-2">
        <div class="row pt-1">
            <div class="col-12 col-lg-4 mb-5 text-center text-lg-start">
                <img src="../../images/logo/logo_lu_footer@1x.png" srcset="../../images/logo/logo_lu_footer@1x.png 1x, ../../images/logo/logo_lu_footer@2x.png 2x" alt="Lunds universitet" class=" footer-logo">

            </div>
            <div class="col-6 col-md-3 offset-md-3 offset-lg-0 col-lg-4 mb-5">
                <h1 class="p font-weight-bold text-uppercase mb-1">Kontakta oss</h1>
                <p>Lunds universitet<br>Box 117<br>220 00 LUND<br>046-222 00 00<br><a href="mailto:lu@lu.se" class="text-white">lu@lu.se</a></p>
            </div>
            <div class="col-6 col-md-3 col-lg-4 mb-5">
                <h1 class="p font-weight-bold text-uppercase mb-1">Genvägar</h1>
                <div class="nav nav-list flex-column">
                    <a class="nav-link text-white py-1 px-0" href="english.html">Change to English <i class="fal fa-globe"></i></a>
                    <a class="nav-link text-white py-1 px-0" href="om.html">Om webbplatsen</a>
                    <a class="nav-link text-white py-1 px-0" href="cookies.html">Om cookies</a>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-12 col-lg-4 offset-lg-4">
                <h1 class="p font-weight-bold text-uppercase mb-1 text-center text-lg-start">Följ oss i sociala medier</h1>
                <ul class="nav nav-social mt-3 nmx-2 justify-content-center justify-content-lg-start">
                    <li class="nav-item mx-2">
                        <a class="nav-link text-white p-0" href="https://www.facebook.com/ekonomihogskolan.lund/"><span class="visually-hidden">Facebook </span><i class="fab fa-facebook-square  fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-white p-0" href="https://www.instagram.com/lunduniversity/"><span class="visually-hidden">Instagram </span><i class="fab fa-instagram  fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-white p-0" href="https://www.linkedin.com/school/lund-university-school-of-economics-and-management/"><span class="visually-hidden">LinkedIn </span><i class="fab fa-linkedin  fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-white p-0" href="https://twitter.com/Lunduni_LUSEM"><span class="visually-hidden">Twitter </span><i class="fab fa-twitter-square  fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link text-white p-0" href="https://www.youtube.com/user/LUSEMLund"><span class="visually-hidden">Youtube </span><i class="fab fa-youtube-square  fa-2x"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg-darker py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 d-flex justify-content-center">
                    <div class="d-inline-block">
                        <h1 class="p font-weight-bold text-uppercase mb-5 text-center text-lg-start">Samarbeten och nätverk</h1>
                        <div class="nav nav-partners align-items-center justify-content-center flex-row nmx-5">
                            <a href="#" class="nav-link p-0 mb-3 mx-5">
                                <img src="../../images/partners/leru.png" alt="leru" class=" footer-partner">

                            </a>
                            <a href="#" class="nav-link p-0 mb-3 mx-5">
                                <img src="../../images/partners/u21.png" alt="u21" class=" footer-partner">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
 
<footer class="footer{{ modifiers footer-modifiers }}">
  {{#if links}}
  <div class="container py-2">
    <div class="row pt-1">
      <div class="col-6 col-md-3 offset-md-3 offset-lg-0 col-lg-4 mb-5">
        <h1 class="p font-weight-bold text-uppercase mb-1">System</h1>
        {{#each links.SYSTEM }}
        <a class="nav-link text-dark py-1 px-0" href="{{url}}">{{{title}}}</a>
        {{/each}}
      </div>
      <div class="col-6 col-md-3 offset-md-3 offset-lg-0 col-lg-4 mb-5">
        <h1 class="p font-weight-bold text-uppercase mb-1">Stöd</h1>
        {{#each links.STOD }}
        <a class="nav-link text-dark py-1 px-0" href="{{url}}">{{{title}}}</a>
        {{/each}}
      </div>
      <div class="col-6 col-md-3 offset-md-3 offset-lg-0 col-lg-4 mb-5">
        <h1 class="p font-weight-bold text-uppercase mb-1">Genvägar</h1>
        {{#each links.GENVAGAR }}
        <a class="nav-link text-dark py-1 px-0" href="{{url}}">{{{title}}}</a>
        {{/each}}
      </div>
    </div>
    <hr>
  </div>
  {{/if}}
  <div class="container py-2">
    <div class="row pt-1">
      <div class="col-12 col-lg-4 mb-5 text-center text-lg-start">
        {{render "@image" logo}}
      </div>
      <div class="col-6 col-md-3 offset-md-3 offset-lg-0 col-lg-4 mb-5">
        <h1 class="p font-weight-bold text-uppercase mb-1">Kontakta oss</h1>
        {{{contact}}}
      </div>
      {{#if shortcuts}}
      <div class="col-6 col-md-3 col-lg-4 mb-5">
        <h1 class="p font-weight-bold text-uppercase mb-1">Genvägar</h1>
        <div class="nav nav-list flex-column">
          {{#each shortcuts }}
          <a class="nav-link text-white py-1 px-0" href="{{url}}">{{{text}}}</a>
          {{/each}}
        </div>
      </div>
      {{/if}}
    </div>
    {{#if social}}
    <div class="row mb-5">
      <div class="col-12 col-lg-4 offset-lg-4">
        <h1 class="p font-weight-bold text-uppercase mb-1 text-center text-lg-start">Följ oss i sociala medier</h1>
        <ul class="nav nav-social mt-3 nmx-2 justify-content-center justify-content-lg-start">
          {{#each social }}
          <li class="nav-item mx-2">
            <a class="nav-link text-white p-0" href="{{url}}"><span class="visually-hidden">{{this.title}} </span>{{render
                (concat "@icon--" icon)}}</a>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
  {{/if}}
  {{#if partners}}
  <div class="bg-darker py-5">
    <div class="container">
      <div class="row">
        <div class="col-12 d-flex justify-content-center">
          <div class="d-inline-block">
            <h1 class="p font-weight-bold text-uppercase mb-5 text-center text-lg-start">Samarbeten och nätverk</h1>
            <div class="nav nav-partners align-items-center justify-content-center flex-row nmx-5">
              {{#each partners }}
              <a href="{{url}}" class="nav-link p-0 mb-3 mx-5">
                {{render "@image" image}}
              </a>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{/if}}
</footer>
 
{
  "_full-screen": true,
  "logo": {
    "src": "/images/logo/logo_lu_footer@1x.png",
    "src-2x": "/images/logo/logo_lu_footer@2x.png",
    "alt": "Lunds universitet",
    "modifiers": [
      "footer-logo"
    ]
  },
  "contact": "<p>Lunds universitet<br>Box 117<br>220 00 LUND<br>046-222 00 00<br><a href=\"mailto:lu@lu.se\" class=\"text-white\">lu@lu.se</a></p>",
  "contact2": "<p>Fakturaadress:<br>Box 188<br>221 00 LUND</p><p>Organisationsnummer:<br>202100-3211</p>",
  "social": [
    {
      "title": "Facebook",
      "icon": "facebook",
      "url": "https://www.facebook.com/ekonomihogskolan.lund/"
    },
    {
      "title": "Instagram",
      "icon": "instagram",
      "url": "https://www.instagram.com/lunduniversity/"
    },
    {
      "title": "LinkedIn",
      "icon": "linkedin",
      "url": "https://www.linkedin.com/school/lund-university-school-of-economics-and-management/"
    },
    {
      "title": "Twitter",
      "icon": "twitter",
      "url": "https://twitter.com/Lunduni_LUSEM"
    },
    {
      "title": "Youtube",
      "icon": "youtube",
      "url": "https://www.youtube.com/user/LUSEMLund"
    }
  ],
  "shortcuts": [
    {
      "url": "english.html",
      "text": "Change to English <i class=\"fal fa-globe\"></i>"
    },
    {
      "url": "om.html",
      "text": "Om webbplatsen"
    },
    {
      "url": "cookies.html",
      "text": "Om cookies"
    }
  ],
  "partners": [
    {
      "title": "leru",
      "img": "/images/partners/leru.png",
      "url": "#",
      "image": {
        "src": "/images/partners/leru.png",
        "alt": "leru",
        "modifiers": [
          "footer-partner"
        ]
      }
    },
    {
      "title": "u21",
      "img": "/images/partners/u21.png",
      "url": "#",
      "image": {
        "src": "/images/partners/u21.png",
        "alt": "u21",
        "modifiers": [
          "footer-partner"
        ]
      }
    }
  ]
}

No notes defined.