Lunds universitet - Style Guide

Navigation Block: Light 

<div class="bg-plaster-25 nav-undecorated overflow-x-hidden">
    <div class="container">
        <div class="row py-7">
            <div class="col mb-7">
                <h2 class=" mt-0 text-black">Studera på lunds universitet</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.</p>

                <div class="nav flex-column border-bottom mt-5">
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Nybörjarprogram</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Magister- och masterprogram</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Kurser</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Studera utomlands</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Livet som student</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col mb-7">
                <h2 class=" mt-0 text-black">Jobba på Lunds universitet</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.</p>

                <div class="nav flex-column border-bottom mt-5">
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Doktorandanställningar</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Lärare och postdoktor</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Undervisning och forskning</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Teknisk/administrativ personal</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                    <div class="nav-item border-top">
                        <a href="../../#.html" class="nav-link py-3 ps-0 d-flex justify-content-between">
                            <span>Spontanansökan</span>
                            <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="bg-plaster-25 nav-undecorated overflow-x-hidden">
  <div class="container">
    <div class="row py-7">
      {{#each columns}}
        <div class="col mb-7">
          {{render "@heading--level-2" heading merge=true}}
          {{render "@paragraph" lead}}
          <div class="nav flex-column border-bottom mt-5">
            {{#each items}}
              <div class="nav-item border-top">
                <a href="{{#if link}}{{path link}}{{/if}}" class="nav-link py-3 ps-0 d-flex justify-content-between">
                  <span>{{label}}</span>
                  <span class="ms-1 float-end"><i class="fal fa-chevron-circle-right fa-lg"></i></span>
                </a>
              </div>
            {{/each}}
          </div>
        </div>
      {{/each}}
    </div>
  </div>
</div>
 
{
  "columns": [
    {
      "heading": {
        "content": "Studera på lunds universitet",
        "modifiers": [
          "mt-0",
          "text-black"
        ]
      },
      "lead": {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua."
      },
      "items": [
        {
          "link": "#",
          "label": "Nybörjarprogram"
        },
        {
          "link": "#",
          "label": "Magister- och masterprogram"
        },
        {
          "link": "#",
          "label": "Kurser"
        },
        {
          "link": "#",
          "label": "Studera utomlands"
        },
        {
          "link": "#",
          "label": "Livet som student"
        }
      ]
    },
    {
      "heading": {
        "content": "Jobba på Lunds universitet",
        "modifiers": [
          "mt-0",
          "text-black"
        ]
      },
      "lead": {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua."
      },
      "items": [
        {
          "link": "#",
          "label": "Doktorandanställningar"
        },
        {
          "link": "#",
          "label": "Lärare och postdoktor"
        },
        {
          "link": "#",
          "label": "Undervisning och forskning"
        },
        {
          "link": "#",
          "label": "Teknisk/administrativ personal"
        },
        {
          "link": "#",
          "label": "Spontanansökan"
        }
      ]
    }
  ]
}

No notes defined.