Lunds universitet - Style Guide

News Focus Item 

<div class="d-lg-none mh-view-50 overflow-hidden">
    <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Image description" class=" img-navblock-fade">

</div>
<div class="container pb-5 pb-md-8 pb-lg-10 border-lg-bottom border-between">
    <div class="row">
        <div class="col-12 col-lg-8 offset-lg-2 text-center">
            <a href="#" class="nav-block mb-10" aria-label="Focus: Title">
                <h2 class="nav-block-link mt-5 mt-lg-10 mb-5"> Fokus: Title&nbsp;<i class="fal fa-chevron-circle-right  fa-sm"></i>
                </h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="d-none d-lg-block col-lg-6">
            <a href="#" class="nav-block position-relative w-100 h-100">
                <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Image description" class=" img-navblock-fade">

                <div class="position-absolute p-3 bottom-0 left-0 right-0">
                    <div class="blockline">
                        <h3 class="h2"><span class="a nav-block-link">Fokus: Title&nbsp;<i class="fal fa-chevron-circle-right  fa-sm"></i>
                            </span>
                        </h3>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card card-item nav-block bg-transparent flex-column flex-md-row mb-6 h-auto card-item nav-block" title="Fotbollen - en kollektiv saga - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. " aria-label="Heading">
                <div class="card-img ">
                    <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="List item image description." class=" w-100">

                    </div>
                </div>
                <div class="card-body p-0 pt-3 pb-6 py-md-0">
                    <div class="meta  mb-0">
                        <span class="meta-date" datetime="2018-06-19">19 juni 2018</span>
                    </div>

                    <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                        <h3 class="nav-block-link mt-0 mb-2 h4">Fotbollen - en kollektiv saga</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. </p>
                </div>
            </div>

            <div class="card card-item nav-block bg-transparent flex-column flex-md-row mb-6 h-auto card-item nav-block" title="Dagens bryggerier har anor från järnåldern - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. " aria-label="Heading">
                <div class="card-img ">
                    <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="List item image description." class=" w-100">

                    </div>
                </div>
                <div class="card-body p-0 pt-3 pb-6 py-md-0">
                    <div class="meta  mb-0">
                        <span class="meta-date" datetime="2018-06-19">19 juni 2018</span>
                    </div>

                    <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                        <h3 class="nav-block-link mt-0 mb-2 h4">Dagens bryggerier har anor från järnåldern</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. </p>
                </div>
            </div>

            <div class="card card-item nav-block bg-transparent mb-0" title="Ny styrelse för EFL utsedd - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. " aria-label="Heading">
                <div class="card-img ">
                    <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="List item image description." class=" w-100">

                    </div>
                </div>
                <div class="card-body p-0 pt-3 pb-6 py-md-0">
                    <div class="meta  mb-0">
                        <span class="meta-date" datetime="2018-06-19">19 juni 2018</span>
                    </div>

                    <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                        <h3 class="nav-block-link mt-0 mb-2 h4">Ny styrelse för EFL utsedd</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. </p>
                </div>
            </div>

        </div>
    </div>
</div>
 
<div class="d-lg-none mh-view-50 overflow-hidden">
  {{render "@image--object-fit" image merge=true}}
</div>
<div class="container pb-5 pb-md-8 pb-lg-10 border-lg-bottom border-between">
  <div class="row">
    <div class="col-12 col-lg-8 offset-lg-2 text-center">
      <a href="{{link}}" class="nav-block mb-10" aria-label="Focus: {{title}}">
        <h2 class="nav-block-link mt-5 mt-lg-10 mb-5"> Fokus: {{title}}&nbsp;{{render "@icon--read-more-sm"}}</h2>
        <p class="lead">{{lead}}</p>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="d-none d-lg-block col-lg-6">
      <a href="{{link}}" class="nav-block position-relative w-100 h-100">
        {{render "@image--navblock-fade" image merge=true}}
        <div class="position-absolute p-3 bottom-0 left-0 right-0">
          <div class="blockline">
            <h3 class="h2"><span class="a nav-block-link">Fokus: {{title}}&nbsp;{{render "@icon--read-more-sm"}}</span>
            </h3>
          </div>
        </div>
      </a>
    </div>
    <div class="col-12 col-lg-6">
      {{#each items}}
        {{render "@list-item--news-list" this merge=true}}
      {{/each}}
    </div>
  </div>
</div>
 
{
  "_full-screen": true,
  "link": "#",
  "title": "Title",
  "lead": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.",
  "image": {
    "modifiers": [
      "img-navblock-fade"
    ]
  },
  "item-component": "list-item--events",
  "item-merge": true,
  "items": [
    {
      "meta": {
        "date": "19 juni 2018",
        "datetime": "2018-06-19",
        "category": "",
        "modifiers": [
          "mb-0"
        ]
      },
      "image-modifiers": [
        ""
      ],
      "link": "#",
      "heading": "Fotbollen - en kollektiv saga",
      "lead": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. "
    },
    {
      "meta": {
        "date": "19 juni 2018",
        "datetime": "2018-06-19",
        "category": "",
        "modifiers": [
          "mb-0"
        ]
      },
      "image-modifiers": [
        ""
      ],
      "link": "#",
      "heading": "Dagens bryggerier har anor från järnåldern",
      "lead": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. "
    },
    {
      "modifiers": [
        "mb-0"
      ],
      "meta": {
        "date": "19 juni 2018",
        "datetime": "2018-06-19",
        "category": "",
        "modifiers": [
          "mb-0"
        ]
      },
      "image-modifiers": [
        ""
      ],
      "link": "#",
      "heading": "Ny styrelse för EFL utsedd",
      "lead": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. "
    }
  ]
}

No notes defined.