Lunds universitet - Style Guide

Header Puffs 

<div class="pt-5 pb-5 ">
    <div class="row g-0">
        <div class="col-sm-12">
            <div class="row g-0">

                <div class="col-12 col-lg-4 pe-lg-3">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x,
                /images/_content/placeholder_1@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-lg-4 px-lg-2">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x,
                /images/_content/placeholder_2@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-lg-4 ps-lg-3">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x,
                /images/_content/placeholder_3@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="pt-5 pb-5 ">
  <div class="row g-0">
    <div class="col-sm-12">
      <div class="row g-0">

        {{#each data}}
        <div class="col-12 col-lg-4 {{modifier}}">
          <a href="#" class="nav-block masonry-tile-img">
            <div class="masonry-tile-img-bg">
              <img
                alt="{{image-alt}}"
                src="{{path image.src}}"
                srcset="{{path image.src }} 1x,
                {{ image.src-2x}} 2x"

              >
            </div>
            <div class="masonry-tile-img-content">
              <div class="blockline">
                <h2>
                  <span class="a nav-block-link">{{ image.title}}
                    <i class="fal fa-chevron-circle-right fa-sm"></i>
                  </span>
                </h2>
              </div>
            </div>
          </a></div>
        {{/each}}

      </div>
    </div>
  </div>
</div>
 
{
  "_full-screen": true,
  "hej": "hej",
  "data": [
    {
      "image": {
        "title": "Bildtitel",
        "src": "/images/_content/placeholder_1@1x.jpg",
        "src-2x": "/images/_content/placeholder_1@1x.jpg"
      },
      "text": {
        "title": "LTH:s vision: Tillsammans utforskar och skapar vi – till nytta för världen",
        "link": {
          "url": "#",
          "modifiers": [
            "nav-block-sky",
            "nav-block-fade-sky"
          ]
        }
      },
      "image-alt": {
        "title": "Studenter tävlar i syntetisk biologi"
      },
      "modifier": "pe-lg-3"
    },
    {
      "image": {
        "title": "Bildtitel",
        "src": "/images/_content/placeholder_2@1x.jpg",
        "src-2x": "/images/_content/placeholder_2@1x.jpg"
      },
      "text": {
        "title": "LTH:s vision: Tillsammans utforskar och skapar vi – till nytta för världen",
        "link": {
          "url": "#",
          "modifiers": [
            "nav-block-sky",
            "nav-block-fade-sky"
          ]
        }
      },
      "image-alt": {
        "title": "Studenter tävlar i syntetisk biologi"
      },
      "modifier": "px-lg-2"
    },
    {
      "image": {
        "title": "Bildtitel",
        "src": "/images/_content/placeholder_3@1x.jpg",
        "src-2x": "/images/_content/placeholder_3@1x.jpg"
      },
      "text": {
        "title": "LTH:s vision: Tillsammans utforskar och skapar vi – till nytta för världen",
        "link": {
          "url": "#",
          "modifiers": [
            "nav-block-sky",
            "nav-block-fade-sky"
          ]
        }
      },
      "image-alt": {
        "title": "Studenter tävlar i syntetisk biologi"
      },
      "modifier": "ps-lg-3"
    }
  ]
}

No notes defined.