Lunds universitet - Style Guide

News Cards 

<div class="bg-plaster-50">
    <div class="container py-4">
        <div class="row my-8">
            <div class="col-12 text-center ">
                <h1 class="">Nyheter</h1>

                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit uisque eu diam elit morbi sollicitudin</p>

                <div class="mt-5">
                    <a href="../../#fler-nyheter.html" class="btn  btn-outline-dark mx-1 mb-3">Fler nyheter</a>

                    <a href="../../#press-och-media.html" class="btn  btn-outline-dark mx-1 mb-3">Press och media</a>

                    <a href="../../#kontakt.html" class="btn  btn-outline-dark mx-1 mb-3">Kontakt</a>

                </div>
            </div>
        </div>
        <div class="row mb-8">
            <div class="col-12 col-lg-6 mb-5 mb-lg-0">
                <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="Minskad inkomstojämlikhet och andel fattiga inom jordbruket" class=" card-img-top">

                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">2018-08-22</span>
                            <span class="meta-category">Forskning</span>
                        </div>

                        <a href="../../#.html" class="stretched-link nav-undecorated">
                            <h2 class=" h2 nav-block-link m-0">Minskad inkomstojämlikhet och andel fattiga inom jordbruket</h2>
                        </a>

                        <p class=" mt-3">Allt färre jordbrukarhushåll räknas som fattiga, visar en ny studie. Ojämlikheten i förvärvsinkomster har också minskat. Där skiljer sig det svenska jordbruket från mängden: I Sverige liksom de flesta andra västländer har inkomstojämlikheten i befolkningen ökat sedan 1990-talet.</p>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6">
                <div class="row">
                    <div class="col-12 col-md-6 mb-5 ">
                        <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="Minskad inkomstojämlikhet och andel fattiga inom jordbruket" class=" card-img-top">

                            </div>
                            <div class="card-body">
                                <div class="meta ">
                                    <span class="meta-date">2018-08-22</span>
                                    <span class="meta-category">Forskning</span>
                                </div>

                                <a href="../../#.html" class="stretched-link nav-undecorated">
                                    <h2 class=" card-title nav-block-link m-0">Minskad inkomstojämlikhet och andel fattiga inom jordbruket</h2>
                                </a>

                                <p class=" m-0"></p>

                            </div>
                        </div>

                    </div>
                    <div class="col-12 col-md-6 mb-5">
                        <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="Fortsatt starkt stöd för kamerabevakning på allmän plats" class=" card-img-top">

                            </div>
                            <div class="card-body">
                                <div class="meta ">
                                    <span class="meta-date">2018-08-20</span>
                                    <span class="meta-category">Samverkan</span>
                                </div>

                                <a href="../../#.html" class="stretched-link nav-undecorated">
                                    <h2 class=" card-title nav-block-link m-0">Fortsatt starkt stöd för kamerabevakning på allmän plats</h2>
                                </a>

                                <p class=" m-0"></p>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6 mb-5 mb-md-0">
                        <div class="card nav-block h-100">
                            <div class="card-img-container">
                                <img src="../../images/_content/placeholder_4@1x.jpg" srcset="../../images/_content/placeholder_4@1x.jpg 1x, ../../images/_content/placeholder_4@2x.jpg 2x" alt="”Vårbudgeten gör inte mycket för att rusta Sverige”" class=" card-img-top">

                            </div>
                            <div class="card-body">
                                <div class="meta ">
                                    <span class="meta-date">2018-08-19</span>
                                    <span class="meta-category">Forskning</span>
                                </div>

                                <a href="../../#.html" class="stretched-link nav-undecorated">
                                    <h2 class=" card-title nav-block-link m-0">”Vårbudgeten gör inte mycket för att rusta Sverige”</h2>
                                </a>

                                <p class=" m-0"></p>

                            </div>
                        </div>

                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card nav-block h-100">
                            <div class="card-img-container">
                                <img src="../../images/_content/placeholder_5@1x.jpg" srcset="../../images/_content/placeholder_5@1x.jpg 1x, ../../images/_content/placeholder_5@2x.jpg 2x" alt="Vasst marknadsföringsteam fick Findus på kroken" class=" card-img-top">

                            </div>
                            <div class="card-body">
                                <div class="meta ">
                                    <span class="meta-date">2018-08-18</span>
                                    <span class="meta-category">Utbildning</span>
                                </div>

                                <a href="../../#.html" class="stretched-link nav-undecorated">
                                    <h2 class=" card-title nav-block-link m-0">Vasst marknadsföringsteam fick Findus på kroken</h2>
                                </a>

                                <p class=" m-0"></p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="bg-plaster-50">
  <div class="container py-4">
    <div class="row my-8">
      <div class="col-12 text-center ">
        {{render "@heading" heading merge=true}}
        {{render "@paragraph" lead merge=true}}
        <div class="mt-5">
          {{#each buttons}}
            {{render "@button--link" this}}
          {{/each}}
        </div>
      </div>
    </div>
    <div class="row mb-8">
      <div class="col-12 col-lg-6 mb-5 mb-lg-0">
        {{render "@card--highlighted" items.card1 merge=true}}
      </div>
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-12 col-md-6 mb-5 ">
            {{render "@card--fill" items.card2 merge=true}}
          </div>
          <div class="col-12 col-md-6 mb-5">
            {{render "@card--fill" items.card3 merge=true}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 mb-5 mb-md-0">
            {{render "@card--fill" items.card4 merge=true}}

          </div>
          <div class="col-12 col-md-6">
            {{render "@card--fill" items.card5 merge=true}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "_full-screen": true,
  "heading": {
    "content": "Nyheter"
  },
  "lead": {
    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit uisque eu diam elit morbi sollicitudin"
  },
  "buttons": [
    {
      "link": "#fler-nyheter",
      "label": "Fler nyheter",
      "modifiers": [
        "btn-outline-dark",
        "mx-1",
        "mb-3"
      ]
    },
    {
      "link": "#press-och-media",
      "label": "Press och media",
      "modifiers": [
        "btn-outline-dark",
        "mx-1",
        "mb-3"
      ]
    },
    {
      "link": "#kontakt",
      "label": "Kontakt",
      "modifiers": [
        "btn-outline-dark",
        "mx-1",
        "mb-3"
      ]
    }
  ],
  "items": {
    "card1": {
      "image": {
        "src": "/images/_content/placeholder_1@1x.jpg",
        "src-2x": "/images/_content/placeholder_1@2x.jpg",
        "alt": "Minskad inkomstojämlikhet och andel fattiga inom jordbruket"
      },
      "meta": {
        "date": "2018-08-22",
        "category": "Forskning"
      },
      "heading": {
        "content": "Minskad inkomstojämlikhet och andel fattiga inom jordbruket",
        "link": "#"
      },
      "lead": {
        "content": "Allt färre jordbrukarhushåll räknas som fattiga, visar en ny studie. Ojämlikheten i förvärvsinkomster har också minskat. Där skiljer sig det svenska jordbruket från mängden: I Sverige liksom de flesta andra västländer har inkomstojämlikheten i befolkningen ökat sedan 1990-talet."
      },
      "modifiers": [
        "h-100"
      ]
    },
    "card2": {
      "link": "#",
      "image": {
        "src": "/images/_content/placeholder_2@1x.jpg",
        "src-2x": "/images/_content/placeholder_2@2x.jpg",
        "alt": "Minskad inkomstojämlikhet och andel fattiga inom jordbruket"
      },
      "heading": {
        "content": "Minskad inkomstojämlikhet och andel fattiga inom jordbruket",
        "link": "#"
      },
      "meta": {
        "date": "2018-08-22",
        "category": "Forskning"
      }
    },
    "card3": {
      "link": "#",
      "image": {
        "src": "/images/_content/placeholder_3@1x.jpg",
        "src-2x": "/images/_content/placeholder_3@2x.jpg",
        "alt": "Fortsatt starkt stöd för kamerabevakning på allmän plats"
      },
      "heading": {
        "content": "Fortsatt starkt stöd för kamerabevakning på allmän plats",
        "link": "#"
      },
      "meta": {
        "date": "2018-08-20",
        "category": "Samverkan"
      }
    },
    "card4": {
      "link": "#",
      "image": {
        "src": "/images/_content/placeholder_4@1x.jpg",
        "src-2x": "/images/_content/placeholder_4@2x.jpg",
        "alt": "”Vårbudgeten gör inte mycket för att rusta Sverige”"
      },
      "heading": {
        "content": "”Vårbudgeten gör inte mycket för att rusta Sverige”",
        "link": "#"
      },
      "meta": {
        "date": "2018-08-19",
        "category": "Forskning"
      }
    },
    "card5": {
      "link": "#",
      "image": {
        "src": "/images/_content/placeholder_5@1x.jpg",
        "src-2x": "/images/_content/placeholder_5@2x.jpg",
        "alt": "Vasst marknadsföringsteam fick Findus på kroken"
      },
      "heading": {
        "content": "Vasst marknadsföringsteam fick Findus på kroken",
        "link": "#"
      },
      "meta": {
        "date": "2018-08-18",
        "category": "Utbildning"
      }
    }
  }
}

No notes defined.