Lunds universitet - Style Guide

Infobox: Icons Vertical 

<div class="infobox bg-copper-50">
    <div class=" row mb-3">
        <div class='col-2 text-center'><i class='far fa-calendar fa-lg'></i></div>
        <div class='col'>
            <h4 class='m-0'>Start date</h4>
            <p>September 2018</p>
        </div>
    </div>
    <div class='row mb-3'>
        <div class='col-2 text-center'><i class='far fa-clock fa-lg'></i></div>
        <div class='col'>
            <h4 class='m-0'>Application deadline</h4>
            <p>Rolling admissions from November to August</p>
        </div>
    </div>
    <div class='row mb-3'>
        <div class='col-2 text-center'><i class='far fa-hourglass-start fa-lg'></i></div>
        <div class='col'>
            <h4 class='m-0'>Duration</h4>
            <p>12 months full-time</p>
        </div>
    </div>
    <div class='row'>
        <div class='col-2 text-center'><i class='far fa-edit fa-lg'></i></div>
        <div class='col'>
            <h4 class='m-0'>Apply from</h4>
            <p>November 2017</p>
        </div>
    </div>

</div>
 
<div class="infobox{{modifiers modifiers}}">
    {{render "@component-list" content}}
</div>
 
{
  "modifiers": [
    "bg-copper-50"
  ],
  "content": {
    "components": [
      {
        "component": "div",
        "context": {
          "content": "<div class='col-2 text-center'><i class='far fa-calendar fa-lg'></i></div><div class='col'><h4 class='m-0'>Start date</h4><p>September 2018</p></div></div><div class='row mb-3'><div class='col-2 text-center'><i class='far fa-clock fa-lg'></i></div><div class='col'><h4 class='m-0'>Application deadline</h4><p>Rolling admissions from November to August</p></div></div><div class='row mb-3'><div class='col-2 text-center'><i class='far fa-hourglass-start fa-lg'></i></div><div class='col'><h4 class='m-0'>Duration</h4><p>12 months full-time</p></div></div><div class='row'><div class='col-2 text-center'><i class='far fa-edit fa-lg'></i></div><div class='col'><h4 class='m-0'>Apply from</h4><p>November 2017</p></div>",
          "modifiers": [
            "row",
            "mb-3"
          ]
        }
      }
    ]
  }
}

No notes defined.