Four Column with Images Options

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

<div class="four-column top-border">
    <div class="column">
        <h2 class="centered">Section Title</h2>
        <a href="#" class="shopNowBtn centered">Shop Now</a>
        <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <h3>Subsection Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et purus nec quam aliquet blandit.</p>
    </div>
    <div class="column">
        <h2 class="centered">Section Title</h2>
        <a href="#" class="shopNowBtn centered">Shop Now</a>
        <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <h3>Subsection Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et purus nec quam aliquet blandit.</p>
    </div>
    <div class="column">
        <h2 class="centered">Section Title</h2>
        <a href="#" class="shopNowBtn centered">Shop Now</a>
        <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <h3>Subsection Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et purus nec quam aliquet blandit.</p>
    </div>
    <div class="column">
        <h2 class="centered">Section Title</h2>
        <a href="#" class="shopNowBtn centered">Shop Now</a>
        <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
        <h3>Subsection Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et purus nec quam aliquet blandit.</p>
    </div>
</div>

Option 2

<div class="top-border bottom-border">
    <div class="two-column">
        <div class="column right-border">
            <h2 class="centered">Lorem Ipsum</h2>
            <p class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="shopNowBtn centered">Shop Now</a>
        </div>
        <div class="column">
            <h2 class="centered">Lorem Ipsum</h2>
            <p class="centered">Suspendisse varius enim in eros elementum tristique.</p>
            <a href="#" class="shopNowBtn centered">Shop Now</a>
        </div>
    </div>
    <div class="four-column">
        <div class="column">
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" class="centered" />
            <h3 class="centered">Lorem Ipsum</h3>
            <p class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="column right-border">
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" class="centered" />
            <h3 class="centered">Lorem Ipsum</h3>
            <p class="centered">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="column">
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" class="centered" />
            <h3 class="centered">Lorem Ipsum</h3>
            <p class="centered">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="column">
            <img src="{{media url="wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg"}}" alt="" class="centered" />
            <h3 class="centered">Lorem Ipsum</h3>
            <p class="centered">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Option 3

<h2 class="centered">Lorem ipsum dolor sit amet</h2>
<div>
    <p class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="four-column">
        <div class="column">
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p class="centered">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="column">
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p class="centered">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="column">
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p class="centered">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="column">
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p class="centered">Lorem ipsum dolor sit amet</p>
        </div>
    </div>
</div>
<a class="readMoreBtn centered" href="#button link goes here" class="button primary">Read More</a>

Option 4 - optional long text

<div class="four-column top-border">
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        <h3 class="centered">Lorem ipsum dolor sit amet</h3>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
        <h3 class="centered">Lorem ipsum dolor sit amet</h3>
    </div>
    <div class="column">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
</div>

Option 5

<div class="column top-border">
    <h2 class="centered">Lorem ipsum dolor sit amet</h2>
    <p class="centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
    <div class="four-column">
        <div class="column">
            <h4 class="centered">Section Title</h4>
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <a href="#" class="shopNowBtn primary">Shop Now</a>
        </div>
        <div class="column">
            <h4 class="centered">Section Title</h4>
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <a href="#" class="shopNowBtn primary">Shop Now</a>
        </div>
        <div class="column">
            <h4 class="centered">Section Title</h4>
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <a href="#" class="shopNowBtn primary">Shop Now</a>
        </div>
        <div class="column">
            <h4 class="centered">Section Title</h4>
            <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
            <a href="#" class="shopNowBtn primary">Shop Now</a>
        </div>
    </div>
</div>

Option 6

<div class="column">
    <h2 class="centered">Lorem ipsum dolor sit amet</h2>
</div>
<div class="four-column bottom-border">
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
</div>
<div class="four-column bottom-border">
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
</div>
<div class="four-column bottom-border">
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
</div>
<div class="four-column bottom-border">
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="learnMoreBtn">Learn More</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
</div>

Option 7

<div class="four-column">
    <div class="column">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="shopNowBtn">Shop Now</a>
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
    <div class="column">
        <img src="{{media url='wysiwyg/Barrier-Gate-Openers_Home-Thumb.jpg'}}" alt="">
    </div>
</div>