Lunds universitet - Style Guide

Masonry Layout: Layout F 

<div class="masonry-container masonry-container-1by1">
    <div class="masonry masonry-rows">
        <div class="masonry-row masonry-row-50">
            <div class="masonry-col masonry-col-50">
                <div class="masonry-row  masonry-row-100">
                    <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">Ekonomihögskolans finansprogram bland de 50 bästa i världen&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                    </h2>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="masonry-col masonry-col-50">
                <div class="masonry-row masonry-row-50">
                    <div class="masonry-tile masonry-tile-sm">
                        <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">Ekonomihögskolans finansprogram bland de 50 bästa i världen&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                    </h2>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
                <div class="masonry-row masonry-row-50">
                    <div class="masonry-tile masonry-tile-sm">
                        <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">Nyhet! BSc International Business startar i höst&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-50">
            <div class="masonry-col masonry-col-60">
                <div class="masonry-tile">
                    <a href="#" class="nav-block nav-block-sky nav-block-fade-sky" aria-label="Historisk novischvecka avklarad">
                        <div class="p-3 p-lg-5">
                            <h2><span class="a nav-block-link">Historisk novischvecka avklarad&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span></h2>
                            <p>I höst tar Ekonomihögskolan för första gången emot internationella programstudenter på grundnivå, vilket är en anledningarna till att Lundaekonomernas studentkår valt att bedriva novischveckan helt på engelska.</p>
                        </div>
                    </a>
                </div>

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

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="masonry-container masonry-container-1by1">
  <div class="masonry masonry-rows">
    <div class="masonry-row masonry-row-50">
      <div class="masonry-col masonry-col-50">
        <div class="masonry-row  masonry-row-100">
          {{render "@masonry-image-tile"}}
        </div>
      </div>
      <div class="masonry-col masonry-col-50">
        <div class="masonry-row masonry-row-50">
          {{render "@masonry-image-tile" image merge=true}}
        </div>
        <div class="masonry-row masonry-row-50">
          {{render "@masonry-image-tile--alt" image-alt merge=true}}
        </div>
      </div>
    </div>
    <div class="masonry-row masonry-row-50">
      <div class="masonry-col masonry-col-60">
        {{render "@masonry-text-tile--novisch"}}
      </div>
      <div class="masonry-col masonry-col-40">
        <div class="masonry-tile masonry-tile-md">
          {{render "@embed"}}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "image": {
    "modifiers": [
      "masonry-tile-sm"
    ]
  },
  "image-alt": {
    "modifiers": [
      "masonry-tile-sm"
    ]
  }
}

No notes defined.