Grids Last updated: 01.07.2020
Grid 1
When you are finished, copy the code above and paste into WordPress for your site.
Example:
Output HTML:
<div class="tl-grid-001">
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-h-square"></i>
<span>Hospital</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-bed"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-notes-medical"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-prescription-bottle"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-star-of-life"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-tooth"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#">
<i class="fas fa-briefcase-medical"></i>
<span>Hospital<br/>Director</span>
</a>
</div>
</div>
</div>
Grid 2
When you are finished, copy the code above and paste into WordPress for your site.
Output HTML:
<div class="tl-grid-002">
<div>
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a href="#">
<div class="bd">
<i class="fas fa-graduation-cap"></i>
<div class="copy">
<span>Earn a</span>
<span>Degree</span>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a href="#">
<div class="bd">
<i class="fas fa-briefcase"></i>
<div class="copy">
<span>Get</span>
<span>Resources</span>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a href="#">
<div class="bd">
<i class="fas fa-school"></i>
<div class="copy">
<span>Earn a</span>
<span>Degree</span>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a href="#">
<div class="bd">
<i class="fas fa-users"></i>
<div class="copy">
<span>Earn a</span>
<span>Degree</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Grid 3
When you are finished, copy the code above and paste into WordPress for your site.
Example:
-
Heading / Title blah blah blah blah
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Heading / Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Heading / Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Heading / Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Heading / Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Output HTML:
<div class="tl-grid-003">
<ul class="row justify-content-center">
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<a href="#" class="bd">
<div class="icon"><i class="fas fa-copy"></i></div>
<div class="copy">
<h3><span>Heading / Title blah blah blah blah</span><i class="fas fa-chevron-right"></i></h3>
<div class="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-primary btn-md btn-rounded">More Info<i class="fas fa-chevron-right"></i></button>
</div>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<a href="#" class="bd">
<div class="icon"><i class="fas fa-copy"></i></div>
<div class="copy">
<h3><span>Heading / Title</span><i class="fas fa-chevron-right"></i></h3>
<div class="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-primary btn-md btn-rounded">More Info<i class="fas fa-chevron-right"></i></button>
</div>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<a href="#" class="bd">
<div class="icon"><i class="fas fa-copy"></i></div>
<div class="copy">
<h3><span>Heading / Title</span><i class="fas fa-chevron-right"></i></h3>
<div class="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-primary btn-md btn-rounded">More Info<i class="fas fa-chevron-right"></i></button>
</div>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<a href="#" class="bd">
<div class="icon"><i class="fas fa-copy"></i></div>
<div class="copy">
<h3><span>Heading / Title</span><i class="fas fa-chevron-right"></i></h3>
<div class="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-primary btn-md btn-rounded">More Info<i class="fas fa-chevron-right"></i></button>
</div>
</div>
</a>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<a href="#" class="bd">
<div class="icon"><i class="fas fa-copy"></i></div>
<div class="copy">
<h3><span>Heading / Title</span><i class="fas fa-chevron-right"></i></h3>
<div class="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-primary btn-md btn-rounded">More Info<i class="fas fa-chevron-right"></i></button>
</div>
</div>
</a>
</li>
</ul>
</div>