Basic 50/50 using fs-container

Vertically Centered Content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.


    <div class="fs-container fs-nogap fs-middle">
        <div class="fs-6">
            
                <img src="https://placekitten.com/640/360" alt="" width="640" height="360">
            
        </div>
        <div class="fs-6">
            <div class="container-of-content">
                
                <h2>Vertically Centered Content</h2>
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>
                
            </div>
        </div>
    </div>

Basic 50/50 using fs-forced-container

Vertically Centered Content


    <div class="fs-forced-container fs-nogap fs-col-count-1 fs-col-count-m-2 fs-middle">
        <div>
            
                <img src="https://placekitten.com/640/360" alt="" width="640" height="360">
            
        </div>
        <div class="container-of-content">
            <div>
                    <h2>Vertically Centered Content</h2>
                    <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>
            </div>
        </div>
    </div>

50/50 with only the content centered and allowing background to span the whole height using fs-container

Vertically Centered Content


    <div class="fs-container fs-nogap">
        <div class="fs-m-6">

            <img src="https://placekitten.com/640/360" alt="" width="640" height="360" >

        </div>
        <div class="fs-m-6">
            <div class="block-of-content fs-container fs-nogap fs-content-middle">

                <h2>Vertically Centered Content</h2>
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>

            </div>
        </div>
    </div>

50/50 with only the content centered and allowing background to span the whole height using fs-forced-container

Vertically Centered Content


    <div class="fs-forced-container fs-nogap fs-col-count-1 fs-col-count-m-2 fs-middle">
        <div>
            
                <img src="https://placekitten.com/640/360" alt="" width="640" height="360">
            
        </div>
        <div class="block-of-content fs-forced-container fs-nogap fs-col-count-1 fs-middle">
            <div>
                    <h2>Vertically Centered Content</h2>
                    <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>
            </div>
        </div>
    </div>

Same as before but reverse the content without changing the HTML structure using fs-container

Vertically Centered Content


<div class="fs-container fs-nogap fs-m-row-reverse">
<div class="fs-m-6">

    <img src="https://placekitten.com/640/360" alt="" width="640" height="360" >

</div>
<div class="fs-m-6">
    <div class="block-of-content fs-container fs-nogap fs-content-middle">

        <h2>Vertically Centered Content</h2>
        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>

    </div>
</div>
</div>

Same as before but reverse the content without changing the HTML structure using fs-forced-container

Vertically Centered Content


<div class="fs-forced-container fs-nogap fs-col-count-1 fs-col-count-m-2 fs-middle">
<div>
    
        <img src="https://placekitten.com/640/360" alt="" width="640" height="360">
    
</div>
<div class="block-of-content fs-forced-container fs-nogap fs-col-count-1 fs-middle fs-m-first-in-row">
    <div>
            <h2>Vertically Centered Content</h2>
            <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nemo inventore! Laborum, similique dolorum. Aspernatur, ea et quis optio blanditiis ipsum pariatur laborum corporis impedit repellendus, architecto porro officia perspiciatis.</span>
    </div>
</div>
</div>