The “Split” pattern

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

The split pattern consists of two parts: one for the copy and another for the media (image or video). This pattern is at the base of ready-made sections like hero split and features split.

Let’s see a practical example in HTML 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Split pattern -->
            <div class="split-wrap">
            
                <!-- Split item (even) -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image">
                        <img src="path/to/image.png" />
                    </div>
                </div>
                
                <!-- Split item (odd) -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image">
                        <img src="path/to/image.png" />
                    </div>
                </div>                
                
                <!-- More split items, if needed... -->
                
            </div>
        
        </div>
    </div>
</section>

You can add as many .split-item you want inside a .split-wrap.

By default, even .split-item elements will display copy on the left and media on the right side. Odd .split-item will invert the position of copy and media – you are not required to add any extra class and you don’t need to invert the order of copy/media elements in HTML.
On mobile screens, copy always displays above the media by default.

Invert the order of copy / media

In order to invert the order on mobile and desktop (or on both) you can use the .invert-mobile and .invert-desktop helper classes to the .split-wrap element 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Split pattern -->
            <div class="split-wrap invert-mobile invert-desktop">
            
                <!-- Split item (even) -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image">
                        <img src="path/to/image.png" />
                    </div>
                </div>
                
                <!-- Split item (odd) -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image">
                        <img src="path/to/image.png" />
                    </div>
                </div>                
                
                <!-- More split items, if needed... -->
                
            </div>
        
        </div>
    </div>
</section>

In React and Vue 👇

<SplitSection invertMobile invertDesktop>
    <!-- Section content -->
</SplitSection>

<c-split-section invert-mobile invert-desktop>
    <!-- Section content -->
</c-split-section>

Align copy / media to top

Here is an example showing how to align copy and media to the top. If you notice, we’ve added the .align-top class to the .split-wrap element.

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Split pattern -->
            <div class="split-wrap align-top">
            
                <!-- Split item -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image">
                        <img src="path/to/image.png" />
                    </div>
                </div>
                
            </div>
        
        </div>
    </div>
</section>

In React and Vue 👇

<SplitSection alignTop>
    <!-- Section content -->
</SplitSection>

<c-split-section align-top>
    <!-- Section content -->
</c-split-section>

Make media fill its container

By default, if the media (image or video) is smaller than its container (i.e. the .split-item-image element), it keeps its original dimension.

In the case you want it to fill the container, use the .split-item-image-fill class like in the example below:

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
        
            <!-- Split pattern -->
            <div class="split-wrap align-top">
            
                <!-- Split item -->
                <div class="split-item">
                    <!-- Copy -->
                    <div class="split-item-content center-content-mobile">
                        <h3 class="mt-0 mb-16">Title</h3>
                        <p class="m-0">Paragraph</p>
                    </div>
                    <!-- Media -->
                    <div class="split-item-image split-item-image-fill">
                        <img src="path/to/image.png" />
                    </div>
                </div>
                
            </div>
        
        </div>
    </div>
</section>

In React and Vue 👇

<SplitSection imageFill>
    <!-- Section content -->
</SplitSection>

<c-split-section image-fill>
    <!-- Section content -->
</c-split-section>

TL;DR

List of available HTML classes

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

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

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

📋 Settings file

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

📋 Theme file

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