Lunds universitet - Style Guide

Masonry Layout: Layout E 

<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 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-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_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 class="masonry-col masonry-col-50">
                        <div class="masonry-rows">
                            <div class="masonry-row masonry-row-50">
                                <div class="masonry-tile masonry-tile-sm">
                                    <a href="#" class="nav-block nav-block-copper-50 nav-block-fade-copper-50" aria-label="Sök forskare, projekt och publikation">
                                        <div class="p-3 p-lg-5">
                                            <h2><span class="a nav-block-link">Sök forskare, projekt och publikation&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span></h2>
                                        </div>
                                    </a>
                                </div>

                            </div>
                            <div class="masonry-row masonry-row-50">
                                <div class="masonry-tile masonry-tile-sm">
                                    <a href="#" class="nav-block nav-block-copper-50 nav-block-fade-copper-50" aria-label="Träffa oss!">
                                        <div class="p-3 p-lg-5">
                                            <h2><span class="a nav-block-link">Träffa oss!&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span></h2>
                                        </div>
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="masonry-row masonry-row-50">
                <div class="masonry-tile masonry-tile-md">
                    <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-image-tile"}}
      </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--alt" image-alt merge=true}}
          </div>
          <div class="masonry-col masonry-col-50">
            <div class="masonry-rows">
              <div class="masonry-row masonry-row-50">
                {{render "@masonry-text-tile" search merge=true}}
              </div>
              <div class="masonry-row masonry-row-50">
                {{render "@masonry-text-tile" meet merge=true}}
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="masonry-row masonry-row-50">
        {{render "@masonry-text-tile--operating-hours" operating-hours merge=true}}
      </div>
    </div>
  </div>
</div>
 
{
  "image-alt": {
    "modifiers": [
      "masonry-tile-sm"
    ]
  },
  "operating-hours": {
    "modifiers": [
      "masonry-tile-md"
    ]
  },
  "search": {
    "modifiers": [
      "masonry-tile-sm"
    ],
    "title": "Sök forskare, projekt och publikation",
    "body": "",
    "link": {
      "url": "#",
      "modifiers": [
        "nav-block-copper-50",
        "nav-block-fade-copper-50"
      ]
    }
  },
  "meet": {
    "modifiers": [
      "masonry-tile-sm"
    ],
    "title": "Träffa oss!",
    "body": "",
    "link": {
      "url": "#",
      "modifiers": [
        "nav-block-copper-50",
        "nav-block-fade-copper-50"
      ]
    }
  }
}

No notes defined.