Lunds universitet - Style Guide

Teaser Cards 

<div class="bg-stone-25 py-9">
    <div class="container">
        <div class="row my-8">
            <div class="col-12 text-center ">
                <h2 class=" h1">Utbildning</h2>

                <p>På Ekonomihögskolan i Lund finns några av Sveriges populäraste utbildningar inom ekonomi och systemvetenskap.</p>

                <div class="mt-5">
                    <a href="../../button1.html" class="btn  mx-1 mb-3 btn-primary">Nybörjarprogram</a>

                    <a href="../../button2.html" class="btn  mx-1 mb-3 btn-primary">Magister- & masterprogram</a>

                    <a href="../../button3.html" class="btn  mx-1 mb-3 btn-primary">Kurser</a>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col mb-3">
                <div class="card nav-block h-100">
                    <div class="card-img-container">
                        <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Studera utomlands bildbeskrivning." class=" card-img-top">

                    </div>
                    <div class="card-body">
                        <h2 class=" card-title h2 nav-block-link m-0">Studera utomlands</h2>

                        <p class=" card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas nisi risus, sed vestibulum ex commodo sit amet. Integer lobortis ullamcorper lacus quis blandit.</p>

                        <a href="../../#.html" class="nav-undecorated stretched-link nav-block-link text-primary">Läs mer om studera utomlands&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col mb-3">
                <div class="card nav-block h-100">
                    <div class="card-img-container">
                        <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="BSc International Business bildbeskrivning." class=" card-img-top">

                    </div>
                    <div class="card-body">
                        <h2 class=" card-title h2 nav-block-link m-0">Nyhet! BSc International Business</h2>

                        <p class=" card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                        <a href="../../#.html" class="nav-undecorated stretched-link nav-block-link text-primary">Läs mer om BSc International Business&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col mb-3">
                <div class="card nav-block h-100">
                    <div class="card-img-container">
                        <img src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x, ../../images/_content/placeholder_3@2x.jpg 2x" alt="Internships bildbeskrivning." class=" card-img-top">

                    </div>
                    <div class="card-body">
                        <h2 class=" card-title h2 nav-block-link m-0">Internships</h2>

                        <p class=" card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                        <a href="../../#.html" class="nav-undecorated stretched-link nav-block-link text-primary">Läs mer om internships&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                        </a>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="bg-stone-25 py-9">
  <div class="container">
    <div class="row my-8">
      <div class="col-12 text-center ">
        {{render "@heading--level-2" heading merge=true}}
        {{render "@paragraph" lead}}
        <div class="mt-5">
          {{#each buttons}}
            {{render "@button--link" this merge=true}}
          {{/each}}
        </div>
      </div>
    </div>
    <div class="row">
      {{#each items}}
        <div class="col mb-3">
          {{render "@card--teaser" this merge=true}}
        </div>
      {{/each}}
    </div>
  </div>
</div>
 
{
  "title": "Utbildning",
  "heading": {
    "content": "Utbildning",
    "modifiers": [
      "h1"
    ]
  },
  "lead": {
    "content": "På Ekonomihögskolan i Lund finns några av Sveriges populäraste utbildningar inom ekonomi och systemvetenskap."
  },
  "buttons": [
    {
      "label": "Nybörjarprogram",
      "link": "button1.html",
      "modifiers": [
        "mx-1",
        "mb-3",
        "btn-primary"
      ]
    },
    {
      "label": "Magister- & masterprogram",
      "link": "button2.html",
      "modifiers": [
        "mx-1",
        "mb-3",
        "btn-primary"
      ]
    },
    {
      "label": "Kurser",
      "link": "button3.html",
      "modifiers": [
        "mx-1",
        "mb-3",
        "btn-primary"
      ]
    }
  ],
  "items": [
    {
      "image": {
        "src": "/images/_content/placeholder_1@1x.jpg",
        "src-2x": "/images/_content/placeholder_1@2x.jpg",
        "alt": "Studera utomlands bildbeskrivning."
      },
      "heading": {
        "content": "Studera utomlands"
      },
      "lead": {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas nisi risus, sed vestibulum ex commodo sit amet. Integer lobortis ullamcorper lacus quis blandit."
      },
      "read-more-link": {
        "text": "Läs mer om studera utomlands"
      },
      "link": "card1.html"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_2@1x.jpg",
        "src-2x": "/images/_content/placeholder_2@2x.jpg",
        "alt": "BSc International Business bildbeskrivning."
      },
      "heading": {
        "content": "Nyhet! BSc International Business"
      },
      "lead": {
        "content": "Some quick example text to build on the card title and make up the bulk of the card's content."
      },
      "read-more-link": {
        "text": "Läs mer om BSc International Business"
      },
      "link": "card2.html"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_3@1x.jpg",
        "src-2x": "/images/_content/placeholder_3@2x.jpg",
        "alt": "Internships bildbeskrivning."
      },
      "heading": {
        "content": "Internships"
      },
      "lead": {
        "content": "Some quick example text to build on the card title and make up the bulk of the card's content."
      },
      "read-more-link": {
        "text": "Läs mer om internships"
      },
      "link": "card3.html"
    }
  ]
}

No notes defined.