Lunds universitet - Style Guide

Infobox 

<div class="infobox bg-copper-50">
    <p>Infobox</p>

    <h2 class=" h3 mt-0 mb-3">Kontakt</h2>

    <p><a href='#'>Johan Marklund</a>, prefekt<br>046-222 8013</p>

    <p><a href='#'>Jan Olhager</a>, bitr prefekt<br>046-222 0366</p>

    <p><strong>Allmänna frågor:</strong><br><a href='#'>info@tlog.lth.se</a><br>046-222 9151</p>

    <p><strong>Institutionen för teknisk ekonomi och logistik</strong><br><strong>Lunds universitet, LTH</strong><br>Box 118<br>221 00 LUND<br><strong>Hämtställe: 9</strong></p>

    <div class=" row mb-5">
        <div class='col-12 col-xl mb-5 mb-xl-0 d-flex flex-row'>
            <div class='me-3'><i class='far fa-calendar fa-lg'></i></div>
            <div>
                <h4 class='m-0'>Start date</h4>
                <p>September 2018</p>
            </div>
        </div>
        <div class='col-12 col-xl d-flex flex-row'>
            <div class='me-3'><i class='far fa-clock fa-lg'></i></div>
            <div>
                <h4 class='m-0'>Application deadline</h4>
                <p>Rolling admissions from November to August</p>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-12 col-xl mb-5 mb-xl-0 d-flex flex-row'>
            <div class='me-3'><i class='far fa-hourglass-start fa-lg'></i></div>
            <div>
                <h4 class='m-0'>Duration</h4>
                <p>12 months full-time</p>
            </div>
        </div>
        <div class='col-12 col-xl d-flex flex-row'>
            <div class='me-3'><i class='far fa-edit fa-lg'></i></div>
            <div>
                <h4 class='m-0'>Apply from</h4>
                <p>November 2017</p>
            </div>
        </div>
    </div>

    <h3 class=" h3 mt-0 mb-3">Lorem ipsum</h3>

    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link px-0 py-1" href="../../#.html">Lorem ipsum dolor sit amet</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-0 py-1" href="../../#.html">Tempus vehiculaiquam Malesuada fermentum faucibus</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-0 py-1" href="../../#.html">Nunc viverra tortor vitae sollici</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-0 py-1" href="../../#.html">Studin pharetra. Integer molestie</a>
        </li>
    </ul>

    <h3 class=" h3 mt-0 mb-3">Lorem ipsum</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lacus lupurus tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc vivtortor vitae sollicitudin pharetra. Integer molestie tristique justo ac venenEtiam sit amet rhoncus quam. Ut congue purus ut sem pretium, ac egestaspellentesque. Etiam vulputate placerat.</p>

    <div class=" text-end font-weight-normal">
        <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
        </a>
    </div>

</div>
 
<div class="infobox{{modifiers modifiers}}">
    {{render "@component-list" content}}
</div>
 
{
  "modifiers": [
    "bg-copper-50"
  ],
  "content": {
    "components": [
      {
        "component": "paragraph",
        "context": {
          "content": "Infobox"
        }
      },
      {
        "component": "heading--level-2",
        "merge": true,
        "context": {
          "content": "Kontakt",
          "modifiers": [
            "h3",
            "mt-0",
            "mb-3"
          ]
        }
      },
      {
        "component": "paragraph",
        "context": {
          "content": "<a href='#'>Johan Marklund</a>, prefekt<br>046-222 8013"
        }
      },
      {
        "component": "paragraph",
        "context": {
          "content": "<a href='#'>Jan Olhager</a>, bitr prefekt<br>046-222 0366"
        }
      },
      {
        "component": "paragraph",
        "context": {
          "content": "<strong>Allmänna frågor:</strong><br><a href='#'>info@tlog.lth.se</a><br>046-222 9151"
        }
      },
      {
        "component": "paragraph",
        "context": {
          "content": "<strong>Institutionen för teknisk ekonomi och logistik</strong><br><strong>Lunds universitet, LTH</strong><br>Box 118<br>221 00  LUND<br><strong>Hämtställe: 9</strong>"
        }
      },
      {
        "component": "div",
        "context": {
          "content": "<div class='col-12 col-xl mb-5 mb-xl-0 d-flex flex-row'><div class='me-3'><i class='far fa-calendar fa-lg'></i></div><div><h4 class='m-0'>Start date</h4><p>September 2018</p></div></div><div class='col-12 col-xl d-flex flex-row'><div class='me-3'><i class='far fa-clock fa-lg'></i></div><div><h4 class='m-0'>Application deadline</h4><p>Rolling admissions from November to August</p></div></div></div><div class='row'><div class='col-12 col-xl mb-5 mb-xl-0 d-flex flex-row'><div class='me-3'><i class='far fa-hourglass-start fa-lg'></i></div><div><h4 class='m-0'>Duration</h4><p>12 months full-time</p></div></div><div class='col-12 col-xl d-flex flex-row'><div class='me-3'><i class='far fa-edit fa-lg'></i></div><div><h4 class='m-0'>Apply from</h4><p>November 2017</p></div></div>",
          "modifiers": [
            "row",
            "mb-5"
          ]
        }
      },
      {
        "component": "heading--level-3",
        "merge": true,
        "context": {
          "content": "Lorem ipsum",
          "modifiers": [
            "h3",
            "mt-0",
            "mb-3"
          ]
        }
      },
      {
        "component": "nav-list"
      },
      {
        "component": "heading--level-3",
        "merge": true,
        "context": {
          "content": "Lorem ipsum",
          "modifiers": [
            "h3",
            "mt-0",
            "mb-3"
          ]
        }
      },
      {
        "component": "paragraph",
        "context": {
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lacus lupurus tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc vivtortor vitae sollicitudin pharetra. Integer molestie tristique justo ac venenEtiam sit amet rhoncus quam. Ut congue purus ut sem pretium, ac egestaspellentesque. Etiam vulputate placerat."
        }
      },
      {
        "component": "read-more-link--container",
        "merge": true,
        "context": {
          "container-modifiers": [
            "text-end",
            "font-weight-normal"
          ]
        }
      }
    ]
  }
}

No notes defined.