Grids Last updated: 01.07.2020

Grid 1

  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

When you are finished, copy the code above and paste into WordPress for your site.

Example:
Hospital
Hospital
Director
Hospital
Director
Hospital
Director
Hospital
Director
Hospital
Director
Hospital
Director
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>
&lt;div class=&quot;tl-grid-001&quot;&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-h-square&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-bed&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-notes-medical&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-prescription-bottle&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-star-of-life&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-tooth&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;fas fa-briefcase-medical&quot;&gt;&lt;/i&gt; &lt;span&gt;Hospital&lt;br/&gt;Director&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Grid 2

  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

When you are finished, copy the code above and paste into WordPress for your site.

Example:
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>
&lt;div class=&quot;tl-grid-002&quot;&gt; &lt;div&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;div class=&quot;col-xs-12 col-sm-6 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;div class=&quot;bd&quot;&gt; &lt;i class=&quot;fas fa-graduation-cap&quot;&gt;&lt;/i&gt; &lt;div class=&quot;copy&quot;&gt; &lt;span&gt;Earn a&lt;/span&gt; &lt;span&gt;Degree&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-6 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;div class=&quot;bd&quot;&gt; &lt;i class=&quot;fas fa-briefcase&quot;&gt;&lt;/i&gt; &lt;div class=&quot;copy&quot;&gt; &lt;span&gt;Get&lt;/span&gt; &lt;span&gt;Resources&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-6 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;div class=&quot;bd&quot;&gt; &lt;i class=&quot;fas fa-school&quot;&gt;&lt;/i&gt; &lt;div class=&quot;copy&quot;&gt; &lt;span&gt;Earn a&lt;/span&gt; &lt;span&gt;Degree&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-12 col-sm-6 col-md-6 col-lg-3&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;div class=&quot;bd&quot;&gt; &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt; &lt;div class=&quot;copy&quot;&gt; &lt;span&gt;Earn a&lt;/span&gt; &lt;span&gt;Degree&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Grid 3

  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

When you are finished, copy the code above and paste into WordPress for your site.

Example:
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>
&lt;div class=&quot;tl-grid-003&quot;&gt; &lt;ul class=&quot;row justify-content-center&quot;&gt; &lt;li class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-4&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;bd&quot;&gt; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-copy&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class=&quot;copy&quot;&gt; &lt;h3&gt;&lt;span&gt;Heading / Title blah blah blah blah&lt;/span&gt;&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/h3&gt; &lt;div class=&quot;more&quot;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-4&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;bd&quot;&gt; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-copy&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class=&quot;copy&quot;&gt; &lt;h3&gt;&lt;span&gt;Heading / Title&lt;/span&gt;&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/h3&gt; &lt;div class=&quot;more&quot;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-4&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;bd&quot;&gt; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-copy&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class=&quot;copy&quot;&gt; &lt;h3&gt;&lt;span&gt;Heading / Title&lt;/span&gt;&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/h3&gt; &lt;div class=&quot;more&quot;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-4&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;bd&quot;&gt; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-copy&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class=&quot;copy&quot;&gt; &lt;h3&gt;&lt;span&gt;Heading / Title&lt;/span&gt;&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/h3&gt; &lt;div class=&quot;more&quot;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;col-xs-12 col-sm-12 col-md-6 col-lg-4&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;bd&quot;&gt; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fas fa-copy&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class=&quot;copy&quot;&gt; &lt;h3&gt;&lt;span&gt;Heading / Title&lt;/span&gt;&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/h3&gt; &lt;div class=&quot;more&quot;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;button class=&quot;btn btn-primary btn-md btn-rounded&quot;&gt;More Info&lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;