Lunds universitet - Style Guide

Navigation Block: Dark 

<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>
 
{
  "columns": [
    {
      "sections": [
        {
          "title": "Institutioner",
          "slug": "institutioner",
          "items": [
            {
              "label": "Ekonomisk-historiska institutionen"
            },
            {
              "label": "Företagsekonomiska institutionen"
            },
            {
              "label": "Institutionen för handelsrätt"
            },
            {
              "label": "Institutionen för informatik"
            },
            {
              "label": "Nationalekonomiska institutionen"
            },
            {
              "label": "Statistiska institutionen"
            }
          ]
        },
        {
          "title": "Forskningsinstitut och centrum",
          "slug": "forskningsinstitut-och-centrum",
          "items": [
            {
              "label": "Centrum för ekonomisk demografi"
            },
            {
              "label": "Centrum för handelsforskning"
            },
            {
              "label": "Agrifood Economics Centre"
            },
            {
              "label": "Knut Wicksells centrum för finansvetenskap"
            },
            {
              "label": "Sten K Johnson Centre for Entrepreneurship"
            }
          ]
        }
      ]
    },
    {
      "sections": [
        {
          "title": "Nybörjarprogram och kurser",
          "slug": "nyborjarprogram-och-kurser",
          "items": [
            {
              "label": "BSc International Business"
            },
            {
              "label": "Ekonomie kandidatprogrammet"
            },
            {
              "label": "Systemvetenskapliga kandidatprogrammet"
            },
            {
              "label": "Politices kandidatprogrammet"
            },
            {
              "label": "Kandidatprogrammet i praktisk filosofi, politik & ekonomi"
            },
            {
              "label": "Fristående kurser"
            }
          ]
        },
        {
          "title": "Forskarutbildning",
          "slug": "forskarutbildning",
          "items": [
            {
              "label": "Ekonomisk historia"
            },
            {
              "label": "Företagsekonomi"
            },
            {
              "label": "Handelsrätt"
            },
            {
              "label": "Informatik"
            },
            {
              "label": "Nationalekonomi"
            },
            {
              "label": "Statistik"
            }
          ]
        }
      ]
    },
    {
      "sections": [
        {
          "title": "Magister- och masterprogram",
          "slug": "magister-och-masterprogram",
          "items": [
            {
              "label": "Accounting & Finance"
            },
            {
              "label": "Economic Development & Growth"
            },
            {
              "label": "Economic Growth, Population & Development"
            },
            {
              "label": "Economics"
            },
            {
              "label": "Entrepreneurship & Innovation"
            },
            {
              "label": "European & International Tax Law"
            },
            {
              "label": "Finance"
            },
            {
              "label": "Information Systems"
            },
            {
              "label": "Innovation & Spatial Dynamics"
            },
            {
              "label": "International Economics with a focus on China"
            },
            {
              "label": "International Marketing & Brand Management"
            },
            {
              "label": "International Strategic Management"
            },
            {
              "label": "Managing People, Knowledge & Change"
            },
            {
              "label": "Master's in Management"
            }
          ]
        }
      ]
    }
  ]
}

No notes defined.