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.

Sample basic tile full width

Content

Sample basic tile half width

Content

Sample basic tile half width

Content

Sample basic tile 1/3 width

Content

Sample basic tile 1/3 width

Content

Sample basic tile 1/3 width

Content

Code

<!--noindex-->
<!--navigation tile wrapper-->
     <div class="large-6 medium-6 columns tileContainer" data-noimage="true" data-colspan="12">
          <!--navigation tile-->
               <div data-equalizer-watch="tileRow" class="tile panel contentPanel jumpLink alt solid block singleContentElement plain tileBackgroundDefault">
                    <div class="text tileText search" >
                         <h2>Heading</h2>
                          Content 
                    </div>
               </div>
          <!--end navigation tile-->
     </div>
<!--end navigation wrapper-->
<!--endnoindex-->

See also