7.4 #permalink Tile

Toggle example guides Toggle HTML markup

A tile like the one used in the featured projects section

Examples
Default styling
large
large tiles
Markup
<div class="grid-12 grid-lg-6 grid-spacer tile-[modifier class] js-tileMain">
   <script type="text/javascript" src="/styleguide/public/tile.js"></script>
   <script type='text/javascript'>
      var outputRoot = document.getElementsByClassName("tile-[modifier class]")[0];
      var tile = gg.templates.tile({
            size        :  "[modifier class]",
            projectUrl  :  "/20304/",
            projectTitle:  "Main Text",
            imgSrc      :  "/pfil/20304/pict_featured.jpg",
            preText     :  "Small text above main text",
            srcset      :  "/pfil/20304/pict_featured.jpg 480w, pfil/20304/pict_featured_large.jpg 920w, /pfil/20304/pict_featured_jumbo.jpg 1840w",
            srcsizes    :  "(min-width: 64em) 50vw, 100vw",
      });
      outputRoot.innerHTML = tile;
   </script>
</div>
Source: modules/07_large_elements/tile.less, line 4