Lunds universitet - Style Guide

Masonry Layout: Layout G 

<div class="masonry-container masonry-container-3by2">
    <div class="masonry masonry-wide masonry-rows">
        <div class="masonry-row masonry-row-60">
            <div class="masonry-tile">
                <a href="#" class="nav-block masonry-tile-img">
                    <div class="masonry-tile-img-bg">
                        <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Ekonomihögskolans finansprogram bland de 50 bästa i världen">

                    </div>
                    <div class="masonry-tile-img-content">
                        <div class="blockline">
                            <h2><span class="a nav-block-link">Skalbagge ger dieselmotorn en ny chans&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                            </h2>
                        </div>
                    </div>
                </a>
            </div>

        </div>
        <div class="masonry-row masonry-row-40">
            <div class="masonry-cols">
                <div class="masonry-col masonry-col-33">
                    <div class="masonry-tile">
                        <a href="#" class="nav-block masonry-tile-img">
                            <div class="masonry-tile-img-bg">
                                <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="Nyhet! BSc International Business startar i höst">

                            </div>
                            <div class="masonry-tile-img-content">
                                <div class="blockline">
                                    <h2><span class="a nav-block-link">Studenter tävlar i syntetisk biologi&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                    </h2>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
                <div class="masonry-col masonry-col-33">
                    <div class="masonry-tile">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/9xbE1ylBRX4" allowfullscreen></iframe>
                        </div>

                    </div>
                </div>
                <div class="masonry-col masonry-col-33">
                    <div class="masonry-tile">
                        <a href="#" class="nav-block masonry-tile-img overflow-hidden">
                            <div class="masonry-tile-video-bg">
                                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" poster="../../images/ui/transparent.gif" style="background-image: url(../../images/_content/video_1@1x.png)">
                                    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
                                    <source src="http://techslides.com/demos/sample-videos/small.ogg" type="video/ogg">
                                    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                                    <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
                                </video>
                            </div>
                            <div class="masonry-tile-img-content">
                                <div class="blockline">
                                    <h2><span class="a nav-block-link">Se vår jättefina film!&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                    </h2>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <div class="masonry-row masonry-row-40">
            <div class="masonry-cols">
                <div class="masonry-col masonry-col-50">
                    <div class="masonry-tile">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/9xbE1ylBRX4" allowfullscreen></iframe>
                        </div>

                    </div>
                </div>

                <div class="masonry-col masonry-col-50">
                    <div class="masonry-tile">
                        <a href="#" class="nav-block masonry-tile-img">
                            <div class="masonry-tile-img-bg">
                                <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="Nyhet! BSc International Business startar i höst">

                            </div>
                            <div class="masonry-tile-img-content">
                                <div class="blockline">
                                    <h2><span class="a nav-block-link">Studenter tävlar i syntetisk biologi&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                    </h2>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="masonry-container masonry-container-3by2">
  <div class="masonry masonry-wide masonry-rows">
    <div class="masonry-row masonry-row-60">
      {{render "@masonry-image-tile" image merge=true}}
    </div>
    <div class="masonry-row masonry-row-40">
      <div class="masonry-cols">
        <div class="masonry-col masonry-col-33">
          {{render "@masonry-image-tile--alt" image-alt merge=true}}
        </div>
        <div class="masonry-col masonry-col-33">
          <div class="masonry-tile">
            {{render "@embed"}}
          </div>
        </div>
        <div class="masonry-col masonry-col-33">
          {{render "@masonry-video-tile" merge=true}}
        </div>
      </div>
    </div>
    <div class="masonry-row masonry-row-40">
      <div class="masonry-cols">
        <div class="masonry-col masonry-col-50">
          <div class="masonry-tile">
            {{render "@embed"}}
          </div>
        </div>

        <div class="masonry-col masonry-col-50">
          {{render "@masonry-image-tile--alt" image-alt merge=true}}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "image": {
    "title": "Skalbagge ger dieselmotorn en ny chans",
    "src": "http://www.lth.se/fileadmin/lth/images/puffbilder/Viktor_smalbild2.png",
    "src-2x": "http://www.lth.se/fileadmin/lth/images/puffbilder/Viktor_smalbild2.png"
  },
  "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"
  }
}

No notes defined.