Lunds universitet - Style Guide

Programme Career: Wide 

<div class="container py-9">
    <a class="anchor-xl" id="navKarriar"></a>
    <h2 class="mt-0 mb-4 mb-lg-6">Karriär</h2>
    <a href="../../#.html" class="nav-block bg-copper-25 overflow-hidden">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="mh-xl-view-20 h-100 bg-white">
                    <img src="../../images/_content/work_1@1x.jpg" srcset="../../images/_content/work_1@1x.jpg 1x, ../../images/_content/work_1@2x.jpg 2x" alt="Vad gör en fysiker?" class=" img-fit img-navblock-fade">

                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="py-5 px-5 ps-md-0">
                    <div class="h5 mt-0 nav-block-link nav-undecorated">Vad gör en fysiker? <i class="fal fa-chevron-circle-right  fa-lg"></i>
                    </div>
                    <p>Fysiker är experter på att ta fram modeller för att beskriva verkligheten och att göra datorsimuleringar för att testa sina teorier. Som fysiker kan du till exempel arbeta med miljömätningar, datorberäkningar eller system- och programutveckling (…)</p>
                </div>
            </div>
        </div>
    </a>
    <h3 class="mt-5 mt-lg-10 pt-lg-8 border-lg-top mb-4 mb-lg-6">Möt studenter och tidigare studenter</h3>
    <div class="card-group mb-9">
        <div class="card nav-block">
            <div class="card-img-container">
                <img src="../../images/_content/people_1@1x.jpg" srcset="../../images/_content/people_1@1x.jpg 1x, ../../images/_content/people_1@2x.jpg 2x" alt="Därför valde de fysik - Studenterna Adam och Sara berättar" class=" card-img-top">

            </div>
            <div class="card-body p-0">
                <a href="../../#.html" class="nav-undecorated stretched-link">
                    <h4 class="card-title h5 mt-3 nav-block-link">Därför valde de fysik <i class="fal fa-chevron-circle-right  fa-lg"></i>
                    </h4>
                </a>
                <p class="card-text">Studenterna Adam och Sara berättar</p>
            </div>
        </div>
        <div class="card nav-block">
            <div class="card-img-container">
                <img src="../../images/_content/people_2@1x.jpg" srcset="../../images/_content/people_2@1x.jpg 1x, ../../images/_content/people_2@2x.jpg 2x" alt="Jobbet som doktorand i partikelfysik - Tuva Richert berättar" class=" card-img-top">

            </div>
            <div class="card-body p-0">
                <a href="../../#.html" class="nav-undecorated stretched-link">
                    <h4 class="card-title h5 mt-3 nav-block-link">Jobbet som doktorand i partikelfysik <i class="fal fa-chevron-circle-right  fa-lg"></i>
                    </h4>
                </a>
                <p class="card-text">Tuva Richert berättar</p>
            </div>
        </div>
        <div class="card nav-block">
            <div class="card-img-container">
                <img src="../../images/_content/people_3@1x.jpg" srcset="../../images/_content/people_3@1x.jpg 1x, ../../images/_content/people_3@2x.jpg 2x" alt="Jobbet som data scientist - Martin Andersson berättar" class=" card-img-top">

            </div>
            <div class="card-body p-0">
                <a href="../../#.html" class="nav-undecorated stretched-link">
                    <h4 class="card-title h5 mt-3 nav-block-link">Jobbet som data scientist <i class="fal fa-chevron-circle-right  fa-lg"></i>
                    </h4>
                </a>
                <p class="card-text">Martin Andersson berättar</p>
            </div>
        </div>
        <div class="card nav-block">
            <div class="card-img-container">
                <img src="../../images/_content/people_4@1x.jpg" srcset="../../images/_content/people_4@1x.jpg 1x, ../../images/_content/people_4@2x.jpg 2x" alt="Jobbet som systemutvecklare - Jennie Berg berättar" class=" card-img-top">

            </div>
            <div class="card-body p-0">
                <a href="../../#.html" class="nav-undecorated stretched-link">
                    <h4 class="card-title h5 mt-3 nav-block-link">Jobbet som systemutvecklare <i class="fal fa-chevron-circle-right  fa-lg"></i>
                    </h4>
                </a>
                <p class="card-text">Jennie Berg berättar</p>
            </div>
        </div>
    </div>
</div>
 
<div class="container py-9">
  <a class="anchor-xl" id="navKarriar"></a>
  <h2 class="mt-0 mb-4 mb-lg-6">Karriär</h2>
  <a href="{{path career.0.link}}" class="nav-block bg-copper-25 overflow-hidden">
    <div class="row">
      <div class="col-12 col-md-6">
        <div class="mh-xl-view-20 h-100 bg-white">
          {{render "@image--navblock-fade-fit" career.0.image merge=true}}
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="py-5 px-5 ps-md-0">
        <div class="h5 mt-0 nav-block-link nav-undecorated">{{career.0.title}} {{render "@icon--read-more"}}</div>
        {{#each career.0.content}}
          <p>{{{this}}}</p>
        {{/each}}
        </div>
      </div>
    </div>
  </a>
  <h3 class="mt-5 mt-lg-10 pt-lg-8 border-lg-top mb-4 mb-lg-6">Möt studenter och tidigare studenter</h3>
  <div class="card-group mb-9">
    {{#each students}}
      <div class="card nav-block">
        <div class="card-img-container">
          {{render "@image--card-img-top" image merge=true}}
        </div>
        <div class="card-body p-0">
          <a href="{{path link}}"{{#if target}} target="{{target}}"{{/if}} class="nav-undecorated stretched-link"><h4 class="card-title h5 mt-3 nav-block-link">{{title}} {{render "@icon--read-more"}}</h4></a>
          {{#each content}}
            <p class="card-text">{{{this}}}</p>
          {{/each}}
        </div>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "career": [
    {
      "image": {
        "src": "/images/_content/work_1@1x.jpg",
        "src-2x": "/images/_content/work_1@2x.jpg",
        "alt": "Vad gör en fysiker?"
      },
      "link": "#",
      "title": "Vad gör en fysiker?",
      "content": [
        "Fysiker är experter på att ta fram modeller för att beskriva verkligheten och att göra datorsimuleringar för att testa sina teorier. Som fysiker kan du till exempel arbeta med miljömätningar, datorberäkningar eller system- och programutveckling (…)"
      ]
    },
    {
      "image": {
        "src": "/images/_content/work_2@1x.jpg",
        "src-2x": "/images/_content/work_2@2x.jpg",
        "alt": "Vad vill du jobba med?"
      },
      "link": "#",
      "title": "Vad vill du jobba med?",
      "content": [
        "På YouTube kan du se korta filmer där våra studenter och tidigare studenter berättar om sina tankar kring karriärval",
        "(länken öppnas i nytt fönster)."
      ]
    },
    {
      "image": {
        "src": "/images/_content/work_3@1x.jpg",
        "src-2x": "/images/_content/work_3@2x.jpg",
        "alt": "Läs en del av din utbildning utomlands"
      },
      "link": "#",
      "title": "Läs en del av din utbildning utomlands",
      "content": [
        "Genom att läsa en eller två terminer utomlands kan du skaffa en unik utbildningsprofil som passar just dig. Samtidigt ökar du din konkurrenskraft på arbetsmarknaden (…)"
      ]
    }
  ],
  "students": [
    {
      "image": {
        "src": "/images/_content/people_1@1x.jpg",
        "src-2x": "/images/_content/people_1@2x.jpg",
        "alt": "Därför valde de fysik - Studenterna Adam och Sara berättar"
      },
      "link": "#",
      "title": "Därför valde de fysik",
      "content": [
        "Studenterna Adam och Sara berättar"
      ]
    },
    {
      "image": {
        "src": "/images/_content/people_2@1x.jpg",
        "src-2x": "/images/_content/people_2@2x.jpg",
        "alt": "Jobbet som doktorand i partikelfysik - Tuva Richert berättar"
      },
      "link": "#",
      "title": "Jobbet som doktorand i partikelfysik",
      "content": [
        "Tuva Richert berättar"
      ]
    },
    {
      "image": {
        "src": "/images/_content/people_3@1x.jpg",
        "src-2x": "/images/_content/people_3@2x.jpg",
        "alt": "Jobbet som data scientist - Martin Andersson berättar"
      },
      "link": "#",
      "title": "Jobbet som data scientist",
      "content": [
        "Martin Andersson berättar"
      ]
    },
    {
      "image": {
        "src": "/images/_content/people_4@1x.jpg",
        "src-2x": "/images/_content/people_4@2x.jpg",
        "alt": "Jobbet som systemutvecklare - Jennie Berg berättar"
      },
      "link": "#",
      "title": "Jobbet som systemutvecklare",
      "content": [
        "Jennie Berg berättar"
      ]
    }
  ]
}

No notes defined.