The “Tiles” pattern

Most of the ready-made sections are based on 2 common structures, one of these is the “tiles” pattern.

We can use the tiles pattern every time we have a layout made of blocks (or “tiles”). This pattern is at the base of the ready-made sections like features tiles, pricing, team, and many more.

Here is an example of a tiles pattern:

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Tiles pattern -->
            <div class="tiles-wrap">
            
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>                                  
                
            </div>
        
        </div>
    </div>
</section>

Clear a row

Number of .tiles-item elements you can have in a row depends on their width. For example, the parent container contains 3 items, but you can easily display just 2 of them by “clearing a row” and adding a new .tiles-wrap element 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Tiles pattern -->
            <div class="tiles-wrap">
            
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>                               
                
            </div>
            
            <!-- Another tiles pattern -->
            <div class="tiles-wrap">
            
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>                               
                
            </div>            
        
        </div>
    </div>
</section>

Push uneven items to left

If you have an uneven number of .tiles-item elements and you want them left aligned, just add a .push-left class to the .tiles-wrap element 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Tiles pattern -->
            <div class="tiles-wrap push-left">
            
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
                
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>                                  
                
            </div>
        
        </div>
    </div>
</section>

TL;DR

List of available HTML classes

Sections built around the split patterns accept the same props of a generic section, plus one more prop:

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/patterns/_tiles.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/patterns/_tiles.scss
👆 Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/patterns/_tiles.scss
👆 Use this to add custom CSS