Pattern library

Tiles

Tiles should be primarily used as navigation items. In some rare cases they can be used to hold contextual content.

Tiles can be configured to fit a variety of widths. This is managed using the attribute "data-colspan" applied to the "tileContainer" class.

Full width tiles take the attribute data-colspan="12". Tiles can use any combination of data-colspan up to 12.

Tiles can have background colours applied to the "tile" class according to the background classes.

Code

<!--noindex-->
<!--navigation tile wrapper-->
     <div class="large-6 medium-6 columns tileContainer" data-noimage="false" data-colspan="12">
          <!--navigation tile-->
               <div class="tile panel tileBackgroundDefault">
                    <div class="image tileImage">
                         <img src="path/to/image" alt="alt text" />
                    </div>
                    <div class="text tileText search" >
                         <h2>Heading</h2>
                          Content 
                    </div>
               </div>
          <!--end navigation tile-->
     </div>
<!--end navigation wrapper-->
<!--endnoindex-->