Lunds universitet - Style Guide

Navigation Block 

<div class="bg-dark text-dark-25 pt-6 overflow-x-hidden">
    <div class="container my-0 mx-auto px-2">
        <div class="row justify-content-center border-bottom border-white mx-1 mx-lg-0 pb-4 nav-collapse font-size-sm mx-0 mx-lg-auto">
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-institutioner" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-institutioner">
                            <span>Institutioner</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-institutioner">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomisk-historiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Företagsekonomiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Institutionen för handelsrätt</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Institutionen för informatik</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Nationalekonomiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Statistiska institutionen</a></li>
                        </ul>
                    </div>
                </div>
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-forskningsinstitut-och-centrum" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-forskningsinstitut-och-centrum">
                            <span>Forskningsinstitut och centrum</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-forskningsinstitut-och-centrum">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Centrum för ekonomisk demografi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Centrum för handelsforskning</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Agrifood Economics Centre</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Knut Wicksells centrum för finansvetenskap</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Sten K Johnson Centre for Entrepreneurship</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-nyborjarprogram-och-kurser" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-nyborjarprogram-och-kurser">
                            <span>Nybörjarprogram och kurser</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-nyborjarprogram-och-kurser">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">BSc International Business</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomie kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Systemvetenskapliga kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Politices kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Kandidatprogrammet i praktisk filosofi, politik &amp; ekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Fristående kurser</a></li>
                        </ul>
                    </div>
                </div>
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-forskarutbildning" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-forskarutbildning">
                            <span>Forskarutbildning</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-forskarutbildning">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomisk historia</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Företagsekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Handelsrätt</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Informatik</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Nationalekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Statistik</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-magister-och-masterprogram" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-magister-och-masterprogram">
                            <span>Magister- och masterprogram</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-magister-och-masterprogram">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Accounting &amp; Finance</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economic Development &amp; Growth</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economic Growth, Population &amp; Development</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economics</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Entrepreneurship &amp; Innovation</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">European &amp; International Tax Law</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Finance</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Information Systems</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Innovation &amp; Spatial Dynamics</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Economics with a focus on China</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Marketing &amp; Brand Management</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Strategic Management</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Managing People, Knowledge &amp; Change</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Master&#x27;s in Management</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="bg-dark text-dark-25 pt-6 overflow-x-hidden">
  <div class="container my-0 mx-auto px-2">
    <div
      class="row justify-content-center border-bottom border-white mx-1 mx-lg-0 pb-4 nav-collapse font-size-sm mx-0 mx-lg-auto">
      {{#each columns}}
        <div class="col-lg">
          {{#each sections}}
            <div class="mb-3 mb-lg-4">
              <h1 class="font-base">
                <a href="#dark-{{slug}}"
                   class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark"
                   data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-{{slug}}">
                  <span>{{title}}</span>
                  <div class="text-dark-25 d-lg-none">
                    <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                    <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                  </div>
                </a>
              </h1>
              <div class="collapse collapse-lg" id="dark-{{slug}}">
                <ul class="nav flex-column">
                  {{#each items}}
                    <li class="nav-item"><a href="{{#if link}}{{path link}}{{/if}}" class="nav-link py-2 py-lg-1 px-0">{{label}}</a></li>
                  {{/each}}
                </ul>
              </div>
            </div>
          {{/each}}
        </div>
      {{/each}}
    </div>
  </div>
</div>
 
/* No context defined. */

No notes defined.