Lunds universitet - Style Guide

Masonry Layout: Layout D 

<div class="masonry-container masonry-container-2by1">
    <div class="masonry masonry-wide masonry-cols">
        <div class="masonry-col masonry-col-50">
            <div class="masonry-row masonry-row-100">
                <div class="masonry-tile">
                    <a href="#" class="nav-block nav-block-copper-50 nav-block-fade-copper-50" aria-label="Kompletterande utbildning för dig med utländsk examen">
                        <div class="p-3 p-lg-5">
                            <h2><span class="a nav-block-link">Kompletterande utbildning för dig med utländsk examen&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span></h2>
                            <p>För dig som har en utländsk examen inom företagsekonomi eller systemvetenskap och som vill komma in på den svenska arbetsmarknaden.</p>
                        </div>
                    </a>
                </div>

            </div>
        </div>
        <div class="masonry-col masonry-col-50">
            <div class="masonry-row masonry-row-50">
                <div class="masonry-cols">
                    <div class="masonry-col masonry-col-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-col masonry-col-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-tile">
                    <a href="#" class="nav-block nav-block-flower nav-block-fade-flower" aria-label="Öppettider i sommar">
                        <div class="p-3 p-lg-5">
                            <h2><span class="a nav-block-link">Öppettider i sommar&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span></h2>
                            <p>Under sommaren har Ekonomihögskolans reception och bibliotek begränsade öppettider. Även huvudentrén har andra öppettider sommartid.</p>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="masonry-container masonry-container-2by1">
  <div class="masonry masonry-wide masonry-cols">
    <div class="masonry-col masonry-col-50">
      <div class="masonry-row masonry-row-100">
        {{render "@masonry-text-tile--complement"}}
      </div>
    </div>
    <div class="masonry-col masonry-col-50">
      <div class="masonry-row masonry-row-50">
        <div class="masonry-cols">
          <div class="masonry-col masonry-col-50">
            {{render "@masonry-image-tile" image merge=true}}
          </div>
          <div class="masonry-col masonry-col-50">
            {{render "@masonry-image-tile--alt" image-alt merge=true}}
          </div>
        </div>
      </div>
      <div class="masonry-row masonry-row-50">
        {{render "@masonry-text-tile--operating-hours"}}
      </div>
    </div>
  </div>
</div>
 
{
  "image": {
    "modifiers": [
      "masonry-tile-sm"
    ]
  },
  "image-alt": {
    "modifiers": [
      "masonry-tile-sm"
    ]
  }
}

No notes defined.