Mixed Class/Column Examples

Note: the information is filled in here. If you copy and paste this code, you will need to fill in the correct information. All of these options can be seen here, Examples.

Option 1

uses overlay two-column all-border-thin centered and column classes.

<div class="two-column">
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img class="all-border-thin" src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
                <figcaption>
                    <h2 class="centered">lorem ipsum dolor</h2>
                </figcaption>
            </a>
        </figure>
    </div>
    <div class="column">
        <h2>lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
</div>
<div class="two-column">
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img class="all-border-thin" src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
                <figcaption>
                    <h2 class="centered">lorem ipsum dolor</h2>
                </figcaption>
            </a>
        </figure>
    </div>
    <div class="column">
        <h2>lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
</div>

Option 2

uses all-thick-border two-column column and banner-style-4 classes

<div class="column all-border-thick">
    <div class="banner-style-4">
        <div class="banner-style-text">
            <div>
                <h2>lorem ipsum dolor sit amet</h2>
            </div>
            <div>
                <h3 class="contact-bar-text">Suspendisse varius enim in</h3>
            </div>
            <div>
                <h3 class="contact-bar-text">Suspendisse varius enim in eros elementum tristique</h3>
            </div>
        </div>
        <div class="banner-style-button">
            <a href="#">Lorem Ipsum</a>
        </div>
    </div>
    <div class="two-column">
        <div class="column">
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        </div>
        <div class="column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        </div>
    </div>
</div>

Option 3

uses three-column column cat-button centered and shopNowBtn classes

<div class="three-column">
    <div class="column">
        <div class="cat-button centered">
            <a href="#">
                <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        </div>
        </a>
    </div>
    <div class="column">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
    <div class="column">
        <a href="#">
            <div class="cat-button centered">
                <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            </div>
        </a>
    </div>
</div>
<div class="three-column">
    <div class="column">
        <a href="#">
            <div class="cat-button centered">
                <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            </div>
        </a>
    </div>
    <div class="column">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
    <div class="column">
        <a href="#">
            <div class="cat-button centered">
                <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            </div>
        </a>
    </div>
</div>

Option 4

uses column top-border uppercase uncolor card-container bottom-border centered and learnMoreBtn classes

<div class="column">
    <h2 class="centered top-border uppercase uncolor">Lorem ipsum dolor sit amet</h2>
</div>
<div class="card-container bottom-border">
    <div class="card-item">
        <div class="bg-white"><img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt=""></div>
        <div class="card-body">
            <h3 class="centered">Lorem ipsum dolor sit amet</h3>
            <p class="card-text centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="learnMoreBtn centered">Learn More</a>
        </div>
    </div>
    <div class="card-item">
        <div class="bg-white"><img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt=""></div>
        <div class="card-body">
            <h3 class="centered">Lorem ipsum dolor sit amet</h3>
            <p class="card-text centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="learnMoreBtn centered">Learn More</a>
        </div>
    </div>
    <div class="card-item">
        <div class="bg-white"><img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt=""></div>
        <div class="card-body">
            <h3 class="centered">Lorem ipsum dolor sit amet</h3>
            <p class="card-text centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="learnMoreBtn centered">Learn More</a>
        </div>
    </div>
    <div class="card-item">
        <div class="bg-white"><img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt=""></div>
        <div class="card-body">
            <h3 class="centered">Lorem ipsum dolor sit amet</h3>
            <p class="card-text centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="learnMoreBtn centered">Learn More</a>
        </div>
    </div>
    <div class="card-item">
        <div class="bg-white"><img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt=""></div>
        <div class="card-body">
            <h3 class="centered">Lorem ipsum dolor sit amet</h3>
            <p class="card-text centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="learnMoreBtn centered">Learn More</a>
        </div>
    </div>
</div>

Option 5

uses column centered caption-image shopNowBtn and three-column classes and a <strong> and a <span> tag

<div class="column">
    <h2 class="centered">Lorem ipsum dolor sit amet</h2>
</div>
<div class="three-column">
    <div class="column">
        <div class="caption-image">
            <div class="caption">
                <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
            </div>
            <p class="centered"><span>
                    <h4 class="centered"><strong>Lorem ipsum dolor</strong></h4>
                </span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a href="#" class="shopNowBtn centered">Shop Now</a>
        </div>
    </div>
    <div class="column">
        <div class="caption-image">
            <div class="caption">
                <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
            </div>
            <p class="centered"><span>
                    <h4 class="centered"><strong>Lorem ipsum dolor</strong></h4>
                </span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a href="#" class="shopNowBtn centered">Shop Now</a>
        </div>
    </div>
    <div class="column">
        <div class="caption-image">
            <div class="caption">
                <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
            </div>
            <p class="centered"><span>
                    <h4 class="centered"><strong>Lorem ipsum dolor</strong></h4>
                </span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a href="#" class="shopNowBtn centered">Shop Now</a>
        </div>
    </div>
</div>

Option 6

uses column three-column top-border learnMoreBtn and uppercase classes

<div class="column">
    <h2 class="uppercase">Lorem ipsum dolor sit amet</h2>
</div>
<div class="three-column">
    <div class="column top-border">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <a href="#" class="learnMoreBtn uppercase">Learn More</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
    <div class="column top-border">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <a href="#" class="learnMoreBtn uppercase">Learn More</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
    <div class="column top-border">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <a href="#" class="learnMoreBtn uppercase">Learn More</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    </div>
</div>

Option 7

uses column top-border centered uppercase three-column bottom-border uncolor spotlight shopNowBtn and centered classes

<div class="column top-border">
    <h2 class="centered uppercase">Featured Products</h2>
</div>
<div class="three-column bottom-border">
    <div class="spotlight">
        <div class="flex-row">
            <div class="flex-column">
                <h3 class="uncolor">Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            </div>
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        </div>
        <div>
            <a href="#" class="shopNowBtn">Shop Now</a>
        </div>
    </div>
    <div class="spotlight">
        <div class="flex-row">
            <div class="flex-column">
                <h3 class="uncolor">Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            </div>
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        </div>
        <div>
            <a href="#" class="shopNowBtn">Shop Now</a>
        </div>
    </div>
    <div class="spotlight">
        <div class="flex-row">
            <div class="flex-column">
                <h3 class="uncolor">Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            </div>
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        </div>
        <div>
            <a href="#" class="shopNowBtn">Shop Now</a>
        </div>
    </div>
</div>